麻扎网

热点推荐 Message Center

麻扎网>财经>澳门信誉赌博娱乐|前端开发,CSS3动画代码高频知识点
  • 澳门信誉赌博娱乐|前端开发,CSS3动画代码高频知识点
作者:匿名 时间:2020-01-11 18:49:27:

澳门信誉赌博娱乐|前端开发,CSS3动画代码高频知识点

澳门信誉赌博娱乐,动画

与transition十分相像,属性略有差异,下面来看看她有哪些属性

动画持续时间动画计时功能动画延迟这三个属性与transition类似,忽略这块。

前端开发,css3动画代码高频知识点

动画名称

如上面的例子可知animation-name是可以任意名称。这个名称用关键帧来定义

@keyframes中的样式规则是由多个百分比构成的,如“ 0%”到“ 100%”之间,可创建多个百分比

例子中“从”“到”代表“ 0%”到“ 100%”

注意0%不能省略%

@keyframe的语法综合起来如下

@keyframes yourmovename {

或者全部写成百分比的形式:

yourmovename:就是duration-name所要用到值,随便取,语义化更好

百分比:百分之,可添加多个这样的百分值

属性:css属性名,左侧,背景

值:就是响应的属性值

注意!animation目前只支持webkei内核的浏览器,所以需要在上面的基础上加上-webket前缀

动画迭代次数

transition是触发后发生的一次动画,

animation动画如flash,可重复播放,得设置animation-iteration-count属性,自定义次数,infinite为无限次

动画方向

指定动画播放的方向,默认值是noraml,另一个值alterante是反向的意思。偶数次反向执行动画

例子演示效果:http://www.zzfriend.com/demo/css3/lizi.html

兼容性

针对低版本的浏览器最好使用-webket-,-moz,-o -.- ms-

关于低版本的ie,动画建议使用js处理,css3不要勉强。

作者 | 大神神码 | 蚂蚁开源社区大神,资深前端工程师

点击了解更多-演示/下载demo源码!

上一篇:快来感受云东海的独特魅力!三水云东海举办艺术联展
下一篇:欣赏拼布艺术带来的美!学会家居拼布,让你的生活更有情调

Copyright 2018-2019 rumbaxy.com 麻扎网 Inc. All Rights Reserved.