【前端】css3animation动画效果

发布时间:2018-08-18 11:06:32

1.css3动画效果

通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

2.animation属性   

-webkit-animation-name:move;  /*动画属性名,前面keyframes样例定义的动画名*/

-webkit-animation-duration: 10s;  -webkit-animation-timing-function: ease-in-out;   /*动画帧频,和transition-timing-function是一样的*/

-webkit-animation-delay: 2s;  /*动画延迟时间*/-webkit-animation-iteration-count: 10;  /*动画循环次数,infinite为无限次*/

-webkit-animation-direction: normal;  /*定义动画播放方式*/

默认normal,动画正常播放;  alternate,动画轮流反向播放

3.缩写:

.all { -webkit-animation:autoscroll 5s linear infinite; }4.animation 对比 transition   Transition:对元素某个属性或多个属性的变化,进行控制,但只有两个关键贞 开始 和 结束

Animation:对元素某个属性或多个属性的变化,进行控制,可以设置多个关键贞

Transition与Animation:

transition需要触发一个事件

animation不需要触发任何事件

}

远近互联前端小华整理发布,希望能对学习技术的你有所帮助

远近互联专业提供网站建设、APP开发、网站优化、外贸网站SEO、微信运营的品牌整合营销服务让客户通过网络品牌建立与网络传播提高业绩。


【相关推荐】