animation

时间 2019-11-13

标签 animation 繁體版

原文原文链接

做者：zccsthtml

经过 CSS3，咱们可以建立动画，这能够在许多网页中取代动画图片、Flash 动画以及 JavaScript。web

CSS3 @keyframes 规则

如需在 CSS3 中建立动画，您须要学习 @keyframes 规则。浏览器

@keyframes 规则用于建立动画。在 @keyframes 中规定某项 CSS 样式，就能建立由当前样式逐渐改成新样式的动画效果。学习

什么是 CSS3 中的动画？

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

您能够改变任意多的样式任意多的次数。spa

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

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

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

实例

当动画为 25% 及 50% 时改变背景色，而后当动画 100% 完成时再次改变：图片

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>

<div></div>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>