CSS3动画的使用

一.动画的创建 @keyframes规则是创建动画 浏览器兼容 1、@keyframes myfirst 2、@-webkit-keyframes myfirst /* Safari and Chrome */ 3、@-moz-keyframes myfirst /* Firefox */ 4、@-o-keyframes myfirst /* Opera */ 根据状态的百分比来设置 @-webkit-keyframes fadeIn { 0% { opacity: 0; /*初始状态 透明度为0*/ } 50% { opacity: 0; /*中间状态 透明度为0*/ } 100% { opacity: 1; /*结尾状态 透明度为1*/ } } 专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧 （从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划） 上面如果有前缀下面使用的时候必须加上前缀 二.css3动画的属性 animation设置动画 ``语法:animation: name duration timing-function delay iteration-count direction fill-modeplay-state;` animation-name指定的动画， 从而执行动画 语法:animation-name: none |动画名称 none:为默认值，当值为none 时，将没有任何动画效果，其可以用于覆盖任何动画。 animation-duration主要用来设置动画播放所需时间，一般以秒为单位 语法:animation-duration:time 和transition-duration使用方法类似 默认单位为:'s' 0表示没有动画效果 animaton-timing- function主要用来设置动画的播放方式 语法: animation- timing- function: ease | linear | ease- in | ease- out | ease- in- out 元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式 他和transition中的transition-timing-function一样， 具有以下几种变换方式： ease、ease- in、ease-in-out、 ease-out、 linear和cubic-bezier。 animation-delay主要用来指定动画的延迟时间 语法:animation-delay:time animation-iteration- count主要用来指定动画播放的循环次数 animation-iteration-count: infinite|time infinite:为循环播放 time:为指定时间默认单位为S animation-direction主要用来指定动画的播放方向 参数 值 描述 normal 默认值。动画按正常播放。 reverse 动画反向播放。 alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 alternate-reverse 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 initial 设置该属性为它的默认值。请参阅 initial。 inherit 从父元素继承该属性。请参阅 inherit。 animation-play- state主要用来控制动画的播放状态 语法:animation-play-state: paused|running; 值 描述 paused 指定暂停动画 running 指定正在运行的动画 animation-fill- mode主要用来设置动画的时间外属性 语法:animation-fill-mode: none|forwards|backwards|both|initial|inherit; 值 描述 none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。 backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。 both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。 initial 设置该属性为它的默认值。请参阅 initial。 inherit 从父元素继承该属性。请参阅 inherit。

本文章由javascript技术分享原创和收集