您现在的位置: 365建站网 > 建站教程 > CSS3教程 > CSS3 动画

CSS3 动画

此节有 262 人学习过     参与评论

CSS3 动画

通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

CSS3 动画

CSS3 @keyframes 规则

如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

浏览器支持

属性 浏览器支持
@keyframes
animation

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释:Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。

实例

</>code

  1. @keyframes myfirst
  2. {
  3. from {background: red;}
  4. to {background: yellow;}
  5. }
  6. @-moz-keyframes myfirst /* Firefox */
  7. {
  8. from {background: red;}
  9. to {background: yellow;}
  10. }
  11. @-webkit-keyframes myfirst /* Safari 和 Chrome */
  12. {
  13. from {background: red;}
  14. to {background: yellow;}
  15. }
  16. @-o-keyframes myfirst /* Opera */
  17. {
  18. from {background: red;}
  19. to {background: yellow;}
  20. }

CSS3 动画

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

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

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

实例

把 "myfirst" 动画捆绑到 div 元素,时长:5 秒:

</>code

  1. div
  2. {
  3. animation: myfirst 5s;
  4. -moz-animation: myfirst 5s;
  5. /* Firefox */
  6. -webkit-animation: myfirst 5s;
  7. /* Safari 和 Chrome */
  8. -o-animation: myfirst 5s;
  9. /* Opera */
  10. }

亲自试一试

注释:您必须定义动画的名称和时长。如果忽略时长,则动画不会允许,因为默认值是 0。

什么是 CSS3 中的动画?

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。

0% 是动画的开始,100% 是动画的完成。

为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

实例

当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变:

</>code

  1. @keyframes myfirst
  2. {
  3. 0% {background: red;}
  4. 25% {background: yellow;}
  5. 50% {background: blue;}
  6. 100% {background: green;}
  7. }
  8. @-moz-keyframes myfirst /* Firefox */
  9. {
  10. 0% {background: red;}
  11. 25% {background: yellow;}
  12. 50% {background: blue;}
  13. 100% {background: green;}
  14. }
  15. @-webkit-keyframes myfirst /* Safari 和 Chrome */
  16. {
  17. 0% {background: red;}
  18. 25% {background: yellow;}
  19. 50% {background: blue;}
  20. 100% {background: green;}
  21. }
  22. @-o-keyframes myfirst /* Opera */
  23. {
  24. 0% {background: red;}
  25. 25% {background: yellow;}
  26. 50% {background: blue;}
  27. 100% {background: green;}
  28. }

亲自试一试

实例

改变背景色和位置:

</>code

  1. @keyframes myfirst
  2. {
  3. 0% {background: red; left:0px; top:0px;}
  4. 25% {background: yellow; left:200px; top:0px;}
  5. 50% {background: blue; left:200px; top:200px;}
  6. 75% {background: green; left:0px; top:200px;}
  7. 100% {background: red; left:0px; top:0px;}
  8. }
  9. @-moz-keyframes myfirst /* Firefox */
  10. {
  11. 0% {background: red; left:0px; top:0px;}
  12. 25% {background: yellow; left:200px; top:0px;}
  13. 50% {background: blue; left:200px; top:200px;}
  14. 75% {background: green; left:0px; top:200px;}
  15. 100% {background: red; left:0px; top:0px;}
  16. }
  17. @-webkit-keyframes myfirst /* Safari 和 Chrome */
  18. {
  19. 0% {background: red; left:0px; top:0px;}
  20. 25% {background: yellow; left:200px; top:0px;}
  21. 50% {background: blue; left:200px; top:200px;}
  22. 75% {background: green; left:0px; top:200px;}
  23. 100% {background: red; left:0px; top:0px;}
  24. }
  25. @-o-keyframes myfirst /* Opera */
  26. {
  27. 0% {background: red; left:0px; top:0px;}
  28. 25% {background: yellow; left:200px; top:0px;}
  29. 50% {background: blue; left:200px; top:200px;}
  30. 75% {background: green; left:0px; top:200px;}
  31. 100% {background: red; left:0px; top:0px;}
  32. }

亲自试一试

CSS3 动画属性

下面的表格列出了 @keyframes 规则和所有动画属性:

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
animation-fill-mode 规定对象动画时间之外的状态。 3

下面的两个例子设置了所有动画属性:

实例

运行名为 myfirst 的动画,其中设置了所有动画属性:

</>code

  1. div
  2. {
  3. animation-name: myfirst;
  4. animation-duration: 5s;
  5. animation-timing-function: linear;
  6. animation-delay: 2s;
  7. animation-iteration-count: infinite;
  8. animation-direction: alternate;
  9. animation-play-state: running;
  10. /* Firefox: */
  11. -moz-animation-name: myfirst;
  12. -moz-animation-duration: 5s;
  13. -moz-animation-timing-function: linear;
  14. -moz-animation-delay: 2s;
  15. -moz-animation-iteration-count: infinite;
  16. -moz-animation-direction: alternate;
  17. -moz-animation-play-state: running;
  18. /* Safari 和 Chrome: */
  19. -webkit-animation-name: myfirst;
  20. -webkit-animation-duration: 5s;
  21. -webkit-animation-timing-function: linear;
  22. -webkit-animation-delay: 2s;
  23. -webkit-animation-iteration-count: infinite;
  24. -webkit-animation-direction: alternate;
  25. -webkit-animation-play-state: running;
  26. /* Opera: */
  27. -o-animation-name: myfirst;
  28. -o-animation-duration: 5s;
  29. -o-animation-timing-function: linear;
  30. -o-animation-delay: 2s;
  31. -o-animation-iteration-count: infinite;
  32. -o-animation-direction: alternate;
  33. -o-animation-play-state: running;
  34. }

亲自试一试

实例

与上面的动画相同,但是使用了简写的动画 animation 属性:

</>code

  1. div
  2. {
  3. animation: myfirst 5s linear 2s infinite alternate;
  4. /* Firefox: */
  5. -moz-animation: myfirst 5s linear 2s infinite alternate;
  6. /* Safari 和 Chrome: */
  7. -webkit-animation: myfirst 5s linear 2s infinite alternate;
  8. /* Opera: */
  9. -o-animation: myfirst 5s linear 2s infinite alternate;
  10. }

亲自试一试

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (262人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号