今天学css3的动画,在这里记录下使用方法以及一些技巧
定义一个动画
在css3中定义动画的语法为
@keyframes 名称 {}
这是w3c的例子 兼容所有浏览器
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
给某样式设置动画只需要添加animation属性就行了
通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:
规定动画的名称
规定动画的时长
例如
把 "myfirst" 动画捆绑到 div 元素,时长:5 秒
div {
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
官方推荐动画使用百分比来设置,有一种帧的概念
css元素
css3动画属性 @keyframes
@keyframes 规定动画
animation 规定动画属性的简写属性,除了animation-play-state属性
animation-name 规定@keyframe动画的名称
animation-duration 规定动画完成一个周期所花费的秒或毫秒,默认是0
animation-timing-function 规定动画的速度曲线,默认是ease
linear 动画从头到尾的速度是相同的
animation-delay 规定动画何时开始,默认是0
animation-iteration-count 规定动画被播放的次数,默认是1
infinite 定义动画无限次播放
animation-direction 规定动画是否在下一周期逆向的播放,默认是normal
animation-play-state 规定动画是否正在运行或暂停,默认是running
running 播放
paused 暂停
animation-fill-mode 规定对象动画时间之外的状态
下面是我用到的一些动画
让此元素不停旋转
@keyframes music {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}