<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
div{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: pink;
animation-name: myName;
/*动画持续时间*/
animation-duration:3s;
/*动画延迟执行*/
animation-delay:2s;
/*动画执行顺序*/
/*animation-direction:reverse;*/
animation-direction: alternate;
/*动画执行次数*/
animation-iteration-count: infinite;
/*动画的填充 在延迟时间内的填充*/
animation-fill-mode: backwards; /*在延迟时间内使用第一帧填充*/
/*animation-fill-mode: forwards;*//*在结束之后使用第一帧填充*/
/*动画执行函数*/
animation-timing-function: ease-out;
}
div:hover{
animation-play-state: paused;
}
@keyframes myName {
from {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(0deg);
transform: translate(0px);
}
to {
width: 300px;
height: 300px;
background-color: blue;
transform: rotate(360deg);
transform: translate(100px);
}
/*0% {
width: 100px;
height: 100px;
background-color: red;
}
50%{
width: 1000px;
height: 1000px;
background-color: green;
}
100% {
width: 300px;
height: 300px;
background-color: blue;
}*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
div{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: pink;
animation-name: myName;
/*动画持续时间*/
animation-duration:3s;
/*动画延迟执行*/
animation-delay:2s;
/*动画执行顺序*/
/*animation-direction:reverse;*/
animation-direction: alternate;
/*动画执行次数*/
animation-iteration-count: infinite;
/*动画的填充 在延迟时间内的填充*/
animation-fill-mode: backwards; /*在延迟时间内使用第一帧填充*/
/*animation-fill-mode: forwards;*//*在结束之后使用第一帧填充*/
/*动画执行函数*/
animation-timing-function: ease-out;
}
div:hover{
animation-play-state: paused;
}
@keyframes myName {
from {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(0deg);
transform: translate(0px);
}
to {
width: 300px;
height: 300px;
background-color: blue;
transform: rotate(360deg);
transform: translate(100px);
}
/*0% {
width: 100px;
height: 100px;
background-color: red;
}
50%{
width: 1000px;
height: 1000px;
background-color: green;
}
100% {
width: 300px;
height: 300px;
background-color: blue;
}*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>