<!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. 09 : 构造方法 & 代码块

    构造方法 概念 构造方法是一种特殊的方法,它是一个与类同名的方法 对象的创建就是通过构造方法来完成. 其功能主要是完成对象的创建或者对象的初始化 当类实例化new一个对象时会自动调用构造方法 构造方法 ...

  2. ACM-ICPC 2018 徐州赛区网络预赛 Features Track

    签到题 因为一个小细节考虑不到wa了两次 // 一开始没这个if wa了.因为数据中存在同一帧(frame)一个相同的值出现多次,这样子同一个i 后面的同样的特征会把len重置为1 #include ...

  3. JXLS支持嵌套循环语法的数据导出说明

    今天在试验用Jxls 2.0导出嵌套循环数据时,第二层数据一直没有成功,最后确认是数据源结构不正确所致,现将这两种数据格式进行说明:假设模板中批注有这样两条循环语法: <jx:each(item ...

  4. 假期学习【五】RDD编程实验四

    今天完成了实验四的第二问和第三问 第二题 对于两个输入文件 A 和 B,编写 Spark 独立应用程序,对两个文件进行合并,并剔除其 中重复的内容,得到一个新文件 C.下面是输入文件和输出文件的一个样 ...

  5. 51Nod 1091 线段的重叠 （贪心）

    X轴上有N条线段,每条线段包括1个起点和终点.线段的重叠是这样来算的,[10 20]和[12 25]的重叠部分为[12 20]. 给出N条线段的起点和终点,从中选出2条线段,这两条线段的重叠部分是最长 ...

  6. 关于Oracle内存分配-解决实际运行时最大Session数不一致远小于系统配置最大的Session数目

    一.相关的技术准备 1. 关于内存的介绍:https://blog.csdn.net/u013641333/article/details/82732526 2. PGA_AGGREGATE_TARG ...

  7. SpringMVC起步

    SpringMVC: SpringMVC是Spring的一个组件,作为控制器,可以替代Servlet SpringMVC的开发过程: 请求发送 DispatcherServlet查询一个或多个Hand ...

  8. main中的argv和argc

    int main(int argc,char* argv[]) 给程序传递命令行参数:第一个参数的值是第二个参数的数组元素个数,即统计运行程序时送给main函数的命令行参数个数. 第二个参数总是cha ...

  9. python实现进度条下载

    核心代码: for i in range(10): print('\r' + '>' * i, end='') 示例展示以搜狗输入法为例: import timeimport requestsi ...

  10. set的使用

    集合是Python的一种数据类型,集合是一个可变容器.常用于列表的去重. 什么是集合 集合是一个可变容器 集合中的数据对象都是唯一的(不可重复) 集合是无序的存储结构 集合是可迭代对象 集合内的元素是 ...