CSS3 animation属性与 @keyframes规则

来源：互联网发布：阿里云物理专线编辑：程序博客网时间：2024/05/20 01:10

http://www.w3school.com.cn/cssref/pr_keyframes.asp

http://www.w3school.com.cn/cssref/pr_animation.asp

http://www.w3school.com.cn/css3/css3_animation.asp

定义：

通过 @keyframes 规则，您能够创建动画。
原理：将一套 CSS 样式逐渐变化为另一套样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
IE10 以及更早的版本，不支持 @keyframe 规则或 animation 属性。

基本用法：

animation: name duration timing-function delay iteration-count direction fill-mode;
@keyframes name {keyframes-selector {css-styles;}}

animation 参数解读：

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

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

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

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

name：keyframe 名称。（如：mymove）
duration：持续时间。如果不写，持续时长为 0，即不播放动画。（如：1s）
timing-function：速度曲线。linear：动画从头到尾的速度是相同的。
ease：默认。动画以低速开始，然后加快，在结束前变慢。
ease-in：动画以低速开始。
ease-out：动画以低速结束。
ease-in-out：动画以低速开始和结束。
cubic-bezier(n,n,n,n)
delay：动画开始之前的延迟。（如：5s）
iteration-count：定义动画播放次数的数值n：自定义
infinite：无限次
direction：动画是否轮流反向播放normal：默认值。动画应该正常播放。
alternate：动画应该轮流反向播放。
fill-mode：规定对象动画时间之外的状态。

注：下面的代码我声明了将会对所有元素的所有属性执行动画，即使是非动画区域。

　　*, *::before, *::after {     will-change: all }

　　很显然，上面的这种使用方法会带来一些没有必要的系统资源的占用和性能损耗。 所以，我们应该尽可能在所需要的元素上使用CSS动画。

keyframes 的4个超级属性

　　在 @keyframes 里，我们几乎可以使用任何的CSS属性。在如今的大部分浏览器中，你可以放心的使用 position ,  scale ,  rotate ,  opacity 等等属性值。并且这4个属性可以给动画效果带来更高效，更好的性能表现。

实例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.main {position: absolute;width: 500px;height: 500px;background: #e8e8e8;}.one {width: 100px;height: 100px;position: relative;top: 0;left: 0;background: pink;-webkit-animation: mymove 3s ease 1s infinite alternate Both;-moz-animation: mymove 3s ease 1s infinite alternate Both;-o-animation: mymove 3s ease 1s infinite alternate Both;animation: mymove 3s ease 1s infinite alternate Both;}@-webkit-keyframes mymove {0% {transform: scale3d(1, 1, 1);opacity: 1;width: 100px;height: 100px;top: 0;left: 0;background: red;}25% {transform: scale3d(1.5, 1.5, 1.5);opacity: 0.5;width: 150px;height: 150px;top: 0;left: 300px;background: yellow;}50% {transform: scale3d(2, 2, 2);opacity: 0;width: 200px;height: 200px;top: 300px;left: 300px;background: pink;}75% {transform: scale3d(1.5, 1.5, 1.5);opacity: 0.5;width: 150px;height: 150px;top: 300px;left: 0px;background: deepskyblue;}100% {transform: scale3d(1, 1, 1);opacity: 1;width: 100px;height: 100px;top: 0;background: red;}}@-moz-keyframes mymove {0% {transform: scale3d(1, 1, 1);opacity: 1;width: 100px;height: 100px;top: 0;left: 0;background: red;}25% {transform: scale3d(1.5, 1.5, 1.5);opacity: 0.5;width: 150px;height: 150px;top: 0;left: 300px;background: yellow;}50% {transform: scale3d(2, 2, 2);opacity: 0;width: 200px;height: 200px;top: 300px;left: 300px;background: pink;}75% {transform: scale3d(1.5, 1.5, 1.5);opacity: 0.5;width: 150px;height: 150px;top: 300px;left: 0px;background: deepskyblue;}100% {transform: scale3d(1, 1, 1);opacity: 1;width: 100px;height: 100px;top: 0;background: red;}}@-o-keyframes mymove {0% {transform: scale3d(1, 1, 1);opacity: 1;width: 100px;height: 100px;top: 0;left: 0;background: red;}25% {transform: scale3d(1.5, 1.5, 1.5);opacity: 0.5;width: 150px;height: 150px;top: 0;left: 300px;background: yellow;}50% {transform: scale3d(2, 2, 2);opacity: 0;width: 200px;height: 200px;top: 300px;left: 300px;background: pink;}75% {transform: scale3d(1.5, 1.5, 1.5);opacity: 0.5;width: 150px;height: 150px;top: 300px;left: 0px;background: deepskyblue;}100% {transform: scale3d(1, 1, 1);opacity: 1;width: 100px;height: 100px;top: 0;background: red;}}@keyframes mymove {0% {transform: scale3d(1, 1, 1);opacity: 1;width: 100px;height: 100px;top: 0;left: 0;background: red;}25% {transform: scale3d(1.5, 1.5, 1.5);opacity: 0.5;width: 150px;height: 150px;top: 0;left: 300px;background: yellow;}50% {transform: scale3d(2, 2, 2);opacity: 0;width: 200px;height: 200px;top: 300px;left: 300px;background: pink;}75% {transform: scale3d(1.5, 1.5, 1.5);opacity: 0.5;width: 150px;height: 150px;top: 300px;left: 0px;background: deepskyblue;}100% {transform: scale3d(1, 1, 1);opacity: 1;width: 100px;height: 100px;top: 0;background: red;}}</style></head><body><div class="main"><div class="one"></div></div></body></html>

0 0

CSS3 animation属性 与 @keyframes规则

CSS3 animation属性与 @keyframes规则