搜索
CSS3动画后盾网2011-2015后盾网人人做后盾•Animation只应用在页面上已存在的DOM元素上，而且他跟Flash和JavaScript以及jQuery制作出来的动画效果又不一样，因为我们使用CSS3的Animation制作动画我们可以省去复杂的js,jquery代码。Keyframes•keyframes即关键帧。Keyframes具有其自己的语法规则，他的命名是由“@keyframes”开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们css的样式写法一样。对于一个“@keyframes”中的样式规则是由多个百分比构成的，如“0%”到“100%”之间，我们可以在这个规则中创建多个百分比，我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动，改变元素颜色，位置，大小，形状等，不过有一点需要注意的是，我们可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束，也就是说这个“from”就相当于“0%”而“to”相当于“100%”，值得一说的是，其中“0%”不能像别的属性取值一样把百分比符号省略。animation动画后盾网人人做后盾animation:•animation:namedurationtiming-functiondelayiteration-countdirectionanimation-name:•定义一个动画的名称。animation-duration:•指定动画播放时长，单位为s(秒),默认值为“0”。animation-timing-function:•动画的播放方式。和transition中的transition-timing-function一样，具有以下六种变换方式：ease;ease-in;ease-in-out;linear;cubic-bezier。animation-delay:•指定延迟时间。单位为s(秒)，其默认值也是0。这个属性和transition-delay使用方法是一样的。animation-iteration-count:•指定元素播放动画的循环次数，其默认值为“1”；infinite为无限次数循环。animation动画后盾网人人做后盾animation-direction:•是否应该轮流反向播放动画•如果animation-direction值是alternate，则动画会在奇数次数（1、3、5等等）正常播放，而在偶数次数（2、4、6等等）向后播放。animation-play-state:•控制元素动画的播放状态。有两个值，running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样，可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放。animation动画后盾网人人做后盾styletype=text/css@-webkit-keyframeshd{/*第1帧*/0%{transform:rotate(10deg);}/*第2帧*/50%{transform:rotate(180deg);}/*第3帧*/100%{transform:rotate(360deg);}}#d1{width:100px;height:100px;background:#f00f00;position:absolute;transition-duration:1s;border-radius:50%;text-align:center;line-height:5em;margin:200px;animation:hd3sinfinitelinear;}#d1:hover{animation-play-state:paused;cursor:pointer;}/styledivid=d1HDCMS/divanimation动画后盾网人人做后盾