animation应用

来源：互联网发布：异界大巫txt吾知编辑：程序博客网时间：2024/06/11 03:32

animation的属性如下图所示：

这里写图片描述

2.如下是所示代码：

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>zyy</title><style> div{    width:100px;    height:100px;    background:red;    position:relative;    animation-name:myfirst;    animation-duration:5s;      animation-timing-function:linear;      animation-delay:2s;    animation-iteration-count:infinite; /*表示循环*/    animation-direction:alternate;  /*表示奇数次正向循环，偶数次反向循环*/    animation-play-state:running;      /* Safari and 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;}@keyframes myfirst{    0%   {background:red; left:0px; top:0px;}    25%  {background:yellow; left:200px; top:0px;}    50%  {background:blue; left:200px; top:200px;}    75%  {background:green; left:0px; top:200px;}    100% {background:red; left:0px; top:0px;}}@-moz-keyframes myfirst /* Firefox */{    0%   {background:red; left:0px; top:0px;}    25%  {background:yellow; left:200px; top:0px;}    50%  {background:blue; left:200px; top:200px;}    75%  {background:green; left:0px; top:200px;}    100% {background:red; left:0px; top:0px;}}@-webkit-keyframes myfirst /* Safari and Chrome */{    0%   {background:red; left:0px; top:0px;}    25%  {background:yellow; left:200px; top:0px;}    50%  {background:blue; left:200px; top:200px;}    75%  {background:green; left:0px; top:200px;}    100% {background:red; left:0px; top:0px;}}@-o-keyframes myfirst /* Opera */{    0%   {background:red; left:0px; top:0px;}    25%  {background:yellow; left:200px; top:0px;}    50%  {background:blue; left:200px; top:200px;}    75%  {background:green; left:0px; top:200px;}    100% {background:red; left:0px; top:0px;}}</style></head><body><div></div></body></html>

3.由于animation的功能很多，当然可以针对animation简写成如下形式：

    animation:myfirst 5s linear 2s infinite alternate;    /* Firefox: */    -moz-animation:myfirst 5s linear 2s infinite alternate;    /* Safari and Chrome: */    -webkit-animation:myfirst 5s linear 2s infinite alternate;    /* Opera: */    -o-animation:myfirst 5s linear 2s infinite alternate;

0 0