CSS3 animation 属性 CSS3 @keyframes 规则

来源：互联网发布：李昌钰经典案例知乎编辑：程序博客网时间：2024/05/19 13:21

animation 属性

ie10 、火狐、欧朋浏览器支持属性，Safari and Chrome支持替代的-webkit-animation属性

ie9以及iE9以下浏览器都不支持该属性。

div{animation:mymove 5s infinite;-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */}

CSS3 @keyframes 规则

使 div 元素匀速向下移动：

@keyframes mymove{from {top:0px;}to {top:200px;}}@-moz-keyframes mymove /* Firefox */{from {top:0px;}to {top:200px;}}@-webkit-keyframes mymove /* Safari 和 Chrome */{from {top:0px;}to {top:200px;}}@-o-keyframes mymove /* Opera */{from {top:0px;}to {top:200px;}}

在一个动画中添加多个 keyframe 选择器

<!DOCTYPE html><html><head><style> div{width:100px;height:100px;background:red;position:relative;animation:mymove 5s infinite;-moz-animation:mymove 5s infinite; /* Firefox */-webkit-animation:mymove 5s infinite; /* Safari and Chrome */-o-animation:mymove 5s infinite; /* Opera */}@keyframes mymove{0%   {top:0px;}25%  {top:200px;}75%  {top:50px}100% {top:100px;}}@-moz-keyframes mymove /* Firefox */{0%   {top:0px;}25%  {top:200px;}75%  {top:50px}100% {top:100px;}}@-webkit-keyframes mymove /* Safari and Chrome */{0%   {top:0px;}25%  {top:200px;}75%  {top:50px}100% {top:100px;}}@-o-keyframes mymove /* Opera */{0%   {top:0px;}25%  {top:200px;}75%  {top:50px}100% {top:100px;}}</style></head><body><div></div></body></html>

在一个动画中改变多个css样式

@keyframes mymove{0%   {top:0px; background:red; width:100px;}100% {top:200px; background:yellow; width:300px;}}@-moz-keyframes mymove /* Firefox */{0%   {top:0px; background:red; width:100px;}100% {top:200px; background:yellow; width:300px;}}@-webkit-keyframes mymove /* Safari 和 Chrome */{0%   {top:0px; background:red; width:100px;}100% {top:200px; background:yellow; width:300px;}}@-o-keyframes mymove /* Opera */{0%   {top:0px; background:red; width:100px;}100% {top:200px; background:yellow; width:300px;}}

<!DOCTYPE html><html><head><style> div{width:100px;height:100px;background:red;position:relative;animation:mymove 5s infinite;-moz-animation:mymove 5s infinite; /* Firefox */-webkit-animation:mymove 5s infinite; /* Safari and Chrome */-o-animation:mymove 5s infinite; /* Opera */}@keyframes mymove{from {top:0px;}to {top:200px;}}@-moz-keyframes mymove /* Firefox */{from {top:0px;}to {top:200px;}}@-webkit-keyframes mymove /* Safari and Chrome */{from {top:0px;}to {top:200px;}}@-o-keyframes mymove /* Opera */{from {top:0px;}to {top:200px;}}</style></head><body><div></div></body></html>

0 0