自己编写的纯CSS3的动画代码

CSS动画案例解析

最新推荐文章于 2023-03-22 16:25:31 发布

原创最新推荐文章于 2023-03-22 16:25:31 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #动画

本文介绍了一个使用CSS实现的动画案例，详细展示了不同元素如何通过关键帧动画实现动态位置变化效果。文章通过三个不同ID的元素演示了动画的不同方向和路径，并且介绍了:hover状态下的动画暂停效果。

<div class="dh" id="kf"></div>
<div class="dh" id="kf1"></div>
<div class="dh" id="kf2"></div>

@keyframes change{
	0%   {left:0px; top:0px;}
    25%  {left:200px; top:300px;}
    50%  {left:400px; top:680px;}
    75%  {left:600px; top:300px;}
    100% {left:800px; top:0px;}
}
@-webkit-keyframes change{
	0%   {left:0px; top:0px;}
    25%  {left:200px; top:300px;}
    50%  {left:400px; top:680px;}
    75%  {left:600px; top:300px;}
    100% {left:800px; top:0px;}
}
@keyframes change1{
	0%   {left:0px; top:0px;}
    25%  {left:-200px; top:300px;}
    50%  {left:-400px; top:680px;}
    75%  {left:-600px; top:300px;}
    100% {left:-800px; top:0px;}
}
@-webkit-keyframes change1{
	0%   {left:0px; top:0px;}
    25%  {left:-200px; top:300px;}
    50%  {left:-400px; top:680px;}
    75%  {left:-600px; top:300px;}
    100% {left:-800px; top:0px;}
}
@keyframes change2{
	0%   {left:0px; top:0px;}
    25%  {left:-200px; top:680px;}
    50%  {left:-400px; top:0px;}
    75%  {left:-100px; top:680px;}
    100% {left:100px; top:0px;}
}
@-webkit-keyframes change2{
	0%   {left:0px; top:0px;}
    25%  {left:-200px; top:300px;}
    50%  {left:-400px; top:680px;}
    75%  {left:-600px; top:300px;}
    100% {left:-800px; top:0px;}
}
.dh{
width:100px;
height:100px;
border-radius:50px;
animation:change 10s;
position:relative;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:1s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
}
.dh:hover{
	animation-play-state: paused
}
#kf{
animation-name:change;
float:left;
background:linear-gradient(to top right, red,white,blue);
}
#kf1{
	float:right;
	background:linear-gradient(to top right, #FC0 , white , #FF0);
	animation-name:change1;
}
#kf2{
	float:left;
	margin-left:500px;
	background:linear-gradient(to top right, red , white , #FF0);
	animation-name:change2;
}

欢迎指教