You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
div
{
animation-name:mymove;
animation-duration:5s;
animation-name:mymove;
animation-duration:5s;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
div
{
animation-name:mymove;
animation-duration:5s;
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;}
}
Animation
与transition十分相像,属性略有差异,下面来看看她有哪些属性
animation-durating animation-timing-function animation-delay 这三个属性与transition 类似,忽略这块
animation-name
如上面例子 可知 animation-name 是可以任意名称。这个名称用 keyframes来定义
@Keyframes中的样式规则是由多个百分比构成的,如“0%”到"100%"之间,可创建多个百分比
例子中"from" "to"代表“0%”到”100%“
注意0% 不能省略%
@Keyframe 的语法综合起来如下
yourMoveName : 就是 duration-name 所要用到值,随便取,语义化更好
Percenttage: 百分之,可添加多个这样的百分值
Properties: css属性名,比如left,background
value: 就是响应的属性值
注意!animation目前只支持webkei内核的浏览器,所以需要在上面的基础上加上-webket 前缀
animation-iteration-count
transition 是触发后发生的一次动画,
animation 动画如flash,可重复播放,得亏 animation-iteration-count 属性,自定义次数,infinite为无限次
animation-direction
指定动画播放的方向,默认值是noraml,另一个值alterante 是反向的意思.偶数次反向执行动画
例子demo 效果 http://www.w3school.com.cn/tiy/t.asp?f=css3_animation3
兼容性
针对低版本的浏览器最好使用前缀-webket-,-moz,-o-.-ms-
关于低版本的IE,动画建议使用JS处理,css3不要勉强。浏览器兼容图如下
The text was updated successfully, but these errors were encountered: