CSS3动画
2019-05-03 本文已影响0人
562843cce5ff
CSS3动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 50%;
background-color: red;
position: relative;
left: 0;
top: 0;
animation-name: zql;
/*规定动画的名称*/
animation-duration: 10s;
/*规定动画在多久内做完*/
animation-timing-function: ease;
/*规定动画运行样式*/
animation-delay: 1s;
/*规定动画延迟时间*/
animation-iteration-count: infinite;
/*规定动画循环次数*/
animation-direction: normal;
/*规定动画是否逆向播放*/
animation-fill-mode: none;
/*规定动画执行完之后的位置*/
animation-fill-mode: none;
/*规定动画等待和执行完毕时的样式*/
/*四个值
1:none;默认为none,不改变
2:forwards让动画在执行完毕后停留在动画最后一帧
3:backwards,让动画在等待时显示动画的第一帧;
4:both forwards和backwards的结合
*/
}
div {
animation: zql 10s ease 1s infinite normal none;
}
div:hover {
animation-play-state: paused;
/*规定是否暂停动画*/
}
div>span{
display: block;
width: 50px;
height: 50px;
border: 1px solid #000;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: gold;
}
@keyframes zql {
form {
left: 0;
top: 0;
background-color: red;
}
/*从这里开始*/
to {
left: 100px;
top: 100px;
background-color: yellow;
}
/*到这里结束*/
}
@keyframes zql {
0% {
width: 100px;
height: 100px;
left: 0;
top: 0;
background-color: red;
transform: rotate(0deg);
}
25% {
width: 200px;
height: 200px;
left: 400px;
top: 0;
background-color: yellow;
transform: rotate(90deg);
}
50% {
width: 100px;
height: 100px;
left: 400px;
top: 400px;
background-color: pink;
transform: rotate(180deg);
}
75% {
width: 200px;
height: 200px;
left: 0;
top: 400px;
background-color: #000000;
transform: rotate(270deg);
}
100% {
width: 100px;
height: 100px;
left: 0;
top: 0;
background-color: red;
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
</html>
