<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3动画功能Animations</title>
</head>
<style>
#animations{
width:200px ;
height:200px ;
background-color: #3598DC;
}
@-webkit-keyframes mycolor{
0%{
background-color: #dc3646; /*加载百分之0%，变色，加宽，旋转20度*/
width:230px ;
-webkit-transform:rotate(20deg);
}
20%{
background-color: #70dc27; /*加载百分之20%，变色，加宽，旋转60度*/
width:250px ;
-webkit-transform:rotate(60deg);
}
50%{
background-color: #a628dc; /*加载百分之50%，变色，加宽，旋转20度，移动30px，30px，*/
width:260px ;
-webkit-transform:rotate(20deg);
-webkit-transform:translate(30PX,30PX);
}
80%{
background-color: #dcc419;
width:280px ;
-webkit-transform:rotate(0deg);
-webkit-transform:translate(50PX,50PX);
}
100%{
background-color: #dc3646;
width:300px ;
-webkit-transform:rotate(180deg);
}
}
#animations:hover{
-webkit-animation-name: mycolor; /*关键帧名字*/
-webkit-animation-duration: 5s; /*变换延续时间*/
-webkit-animation-timing-function: linear; /*变换的速率变化*/
-webkit-animation-iteration-count: 2;
}
</style>
<body>
<div id="animations"></div>
<!--<div id="rotat">rotate旋转</div>-->
<!--<div id="scale">scale缩放</div>-->
<!--<div id="skew">skew 倾斜</div>-->
<!--<div id="translate">translate移动</div>-->
<!--<p>旋转，倾斜 缩放 移动 transform</p>-->
</body>
</html>
CSS3动画功能Animations
#animations { width: 200px; height: 200px; background-color: #3598DC }
#animations:hover { }
时间： 2024-09-29 23:30:53