animation的属性&动画的添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 必须要有animation-name和animation-duration
*
* animation-name:指定动画名称
*
* animation-duration:设置动画的总耗时
*
* animation-iteration-count:设置动画播放的次数，默认为1次，infinite（无限次）
*
* animation-direction:alternate 设置交替动画 默认不交替
*
* animation-delay:设置动画的延迟
*
* animation-timing-function:linear 动画的速度曲线 默认是ease
*
* animation-play-state:paused 设置动画的播放状态 running
*
* animation-fill-mode:设置动画结束的状态：默认情况下，动画执行完毕之后，会回到初始状态
*
* forwards:会保留动画结束时的状态，在有延迟的情况下，并会立即进到动画的初始状态
*
* backwards:不会保留，在有延时的情况下也会立即进入到动画的初始状态
*
* both:会保留动画结束时的状态，在有延时的情况下也会立刻进入到动画的初始状态
*
* */
</script>
<style>
div{
width: 100px;
height: 100px;
background-color: #4e6ef2;
animation: move 5s ease infinite alternate;
animation-play-state: paused;
/*animation-fill-mode: forwards;*/
}
@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>
云彩案例
<!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>
