<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<!-- transition:动画过渡效果属性

功能：使css的属性值在一定的时间内平滑的过渡。这种效果可以在鼠标

点击、划过、获取焦点或对元素任何改变中触发，并圆滑的以动画效果改变css属性值。

可定义的属性有：

transition-property：设置那些属性进行过渡，all：所有属性

transition-duration：完成过渡动画效果的时间，默认是0

transition-timing-function：设置动画的缓动效果，默认是ease（逐渐变慢）。

    （其他常用值：ease-in，加速；ease-out，减速；ease-in-out，加速然后减速)

transition-delay：设置动画开始的延迟时间，默认是0

示例：

使用transition，实现过渡动画。一个红色的正方形，当鼠标移入该区域后，红色正方形放大一倍，并且颜色变为灰色。鼠标移开，还原到初始状态。 -->

<style>

    .box{

        width: 100px;

        height: 100px;

        margin:50px auto;

        background-color: #f00;

        /* 为离开的动作也添加过渡效果 */

        transition: all 1s ease-in 1s;

    }

    .box:hover{

        height: 200px;

        width: 200px;

        border-radius: 50%;

        background-color: #666;

        /* transition-property:width,height,border-radius;

        transition-duration: 1s;

        transition-timing-function:ease-in;

        transition-delay:1s; */

        transition: all 1s ease-in 1s;

    }

</style>

<body>

    <div class="box"></div>

</body>

</html>

Document


 

css动画效果之transition（动画过渡效果属性）的更多相关文章

  1. javascript动画效果之缓冲动画(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  2. Android 动画效果 及 自定义动画

    1. View动画-透明动画效果2. View动画-旋转动画效果3. View动画-移动动画效果4. View动画-缩放动画效果5. View动画-动画效果混合6. View动画-动画效果侦听7. 自 ...

  3. Java 给PPT添加动画效果（预设动画/自定义动画）

    PPT幻灯片中对形状可设置动画效果,常见的动画效果为内置的固定类型,即动画效果和路径是预先设定好的固定模板,但在设计动画效果时,用户也可以按照自己的喜好自定义动画动作路径.下面,通过Java后端程序代 ...

  4. css动画效果之transition（动画效果属性）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. CSS3展现精彩的动画效果 css3的动画属性

    热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...

  6. CSS3动画效果之transition

    CSS3中有两种方式实现动画,transition和animation+@keyframe. 两者的作用机制不一样:transition定义在可能要进行动画的元素上,对某些CSS属性进行监听,一旦CS ...

  7. css之实现下拉框自上而下展开动画效果&&自下而上收起动画效果

    HTML代码: <div className={CX('font-size-selector-sub-list', { show: shouldSubListShow === true, hid ...

  8. jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  9. 012 Android 动画效果(补间动画) +去掉App默认自带的标题+更改应用的图标

    1.介绍 补间动画开发者只需指定动画开始,以及动画结束"关键帧", 而动画变化的"中间帧"则由系统计算并补齐! 2.去掉App的标题 (1)将AndroidMa ...

随机推荐

  1. 最大流算法之Ford-Fulkerson算法与Edmonds–Karp算法

    引子 曾经很多次看过最大流的模板,基础概念什么的也看了很多遍.也曾经用过强者同学的板子,然而却一直不会网络流.虽然曾经尝试过写,然而即使最简单的一种算法也没有写成功过,然后对着强者大神的代码一点一点的 ...

  2. Python该怎么入门?Python入门教程(非常详细)

    Python要学多久可以学会,达到精通呢? 任何知识都是基础入门比较快,达到通晓的程序是需求时日的,这是一个逐渐激烈的进程. 通晓任何一门编程语言,都需求通过大量的实践来积累经验,解决遇到的各种疑难问 ...

  3. hdu1005 矩阵快速幂

    #include<iostream> #include<cstdio> #include<cstring> #include<set> #include ...

  4. CCF CSP 201803-2 碰撞的小球

    题目链接:http://118.190.20.162/view.page?gpid=T72 问题描述 数轴上有一条长度为L(L为偶数)的线段,左端点在原点,右端点在坐标L处.有n个不计体积的小球在线段 ...

  5. 理解 Oracle 多租户体系中（12c,18c,19c）创建用户作用域范围

    本篇探讨以下几个问题:你可提前猜测下面6个场景语句中,哪几个可以成功创建用户? 1. 在CDB级别中创建公共用户,不带 container 子句的效果: 2. 在CDB级别中创建公共用户,带 cont ...

  6. C语言链表的中间结点

    给定一个带有头结点 head 的非空单链表,返回链表的中间结点. 如果有两个中间结点,则返回第二个中间结点. 示例 1: 输入:[1,2,3,4,5]输出:此列表中的结点 3 (序列化形式:[3,4, ...

  7. 洛谷P1028 数的计算

    https://www.luogu.org/problem/P1028 #include<cstdio> using namespace std; int main(){ ,i,f[]; ...

  8. 2020算法设计竞赛 I、匹配星星

    链接:https://ac.nowcoder.com/acm/contest/3005/I来源:牛客网 天上有n颗星星,每颗星星有二维坐标(xi,yi)(x_i, y_i)(xi​,yi​),还有一个 ...

  9. spring boot使用freemarker模版整合spring Data JPA

    目录结构 第一步:在pom.xml文件中添加依赖 <!--模板依赖--> <dependency> <groupId>org.springframework.boo ...

  10. Git-免密提交

    全局设置git免密提交,打开git-bash输入命令: git config credential.helper store --global 单独对某个项目仓库设置时不加  --global 设置之 ...