首页 > 代码库 > CSS3动画

CSS3动画

2024-07-28 21:42:11   227人阅读

CSS3 @keyframes 规则创建css3动画

可以用from或者to或者%

@keyframes myfirst{
}
@-moz-keyframes myfirst{  /* Firefox */
}
@-webkit-keyframes myfirst {/* Safari 和 Chrome */
}
@-o-keyframes myfirst{ /* Opera */
}

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

  • 规定动画的名称
  • 规定动画的时长

实例

把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：

div{
animation: myfirst 5s;
-moz-animation: myfirst 5s;    /* Firefox */
-webkit-animation: myfirst 5s;  /* Safari 和 Chrome */
-o-animation: myfirst 5s;      /* Opera */
}

animation: name duration timing-function delay iteration-count direction;

name(animation-name) 需要绑定到选择器的 keyframe 名称

duration(animation-duration) 完成动画所花费的时间，以秒或毫秒计(默认值是 0，意味着没有动画效果。)

timing-function(animation-timing-function) 动画的速度曲线

linear

动画从头到尾的速度是相同的。

ease

默认。动画以低速开始，然后加快，在结束前变慢。

ease-in

动画以低速开始。

ease-out

动画以低速结束。

ease-in-out

动画以低速开始和结束。

cubic-bezier(n,n,n,n)

在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

 

Delay(animation-delay) 定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。

iteration-count(animation- iteration-count) 定义动画的播放次数

n

定义动画播放次数的数值。

infinite

规定动画应该无限次播放

Direction(animation- direction) 是否应该轮流反向播放动画。

normal

默认值。动画应该正常播放。

alternate

动画应该轮流反向播放。

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}

CSS3动画


联系
我们