animation的属性&动画的添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
</script>
<style>
div{
width: 100px;
height: 100px;
background-color: #4e6ef2;
animation: move 5s ease infinite alternate;
animation-play-state: paused;
}
@keyframes move {
0%{
transform: translateX(0);
}
50%{
transform: translate(400px,400px) scale(1.5) skew(35deg,20deg);
}
100%{
transform: translate(850px,10px) scale(1) skew(0deg,20deg);
}
}
</style>
</head>
<body>
<div id="box"></div>
<input type="button" value="暂停" id="pause">
<input type="button" value="播放" id="running">
<script>
var obj=document.querySelector('#box');
document.querySelector('#pause').onclick=function () {
obj.style.animationPlayState='paused';
};
document.querySelector('#running').onclick=function () {
obj.style.animationPlayState='running';
};
</script>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/82cf62bd3fde181d89d73f3420e3cb05.png)
云彩案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变化的云彩</title>
<style>
html,body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.cloud{
width: 100%;
height: 100%;
background: lightskyblue;
overflow: hidden;
position: relative;
animation: bg 10s linear infinite;
}
.cloud div{
width: 300%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.cloud div:nth-child(1){
background-image: url(cloud_one.png);
animation: move 20s ease infinite;
}
.cloud div:nth-child(2){
background-image: url(cloud_two.png);
animation: move 30s ease infinite;
}
.cloud div:nth-child(3){
background-image: url(cloud_three.png);
animation: move 35s ease infinite;
}
@keyframes bg {
0%{
background-color: skyblue;
}
50%{
background-color: #4e6ef2;
}
100%{
background-color: skyblue;
}
}
@keyframes move {
0%{
left: 0;
}
100%{
left: -200%;
}
}
</style>
</head>
<body>
<div class="cloud">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/384d75ed79dc7d610387560fbcb949d7.png)