html5-Animation动画效果
2019-08-27 本文已影响0人
AssertDo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 100px;
height: 100px;
background-color: red;
/*添加动画效果*/
/*1.animation-name:指定动画名称*/
animation-name: moveTest;
/*2.设置动画的总耗时*/
animation-duration: 2s;
/*3.设置动画的播放次数，默认为1次 可以指定具体的数值，也可以指定infinite(无限次)*/
animation-iteration-count: 1;
/*4.设置交替动画 alternate:来回交替*/
animation-direction: alternate;
/*5.设置动画的延迟*/
animation-delay: 2s;
/*5.设置动画结束时的状态：默认情况下，动画执行完毕之后，会回到原始状态
forwards:会保留动画结束时的状态，在有延迟的情况下，并不会立刻进行到动画的初始状态
backwards:不会保留动画结束时的状态，在添加了动画延迟的前提下，如果动画有初始状态，那么会立刻进行到初始状态
both:会保留动画的结束时状态，在有延迟的情况下也会立刻进入到动画的初始状态*/
animation-fill-mode: both;
/*6.动画的时间函数*/
animation-timing-function: linear;
/*设置动画的播放状态 paused:暂停 running:播放*/
animation-play-state: running;
}
/*创建动画*/
@keyframes moveTest {
/*百分比是指整个动画耗时的百分比 10s*/
/*0%{
transform: translate(0,0);
}*/
/*from:0%*/
from{
transform: translate(0,0) rotate(45deg);
}
/*0~1*/
50%{
transform: translate(0,500px);
}
/*1~2*/
/*100%{
transform: translate(500px,600px);
}*/
/*to:100%*/
to{
transform: translate(500px,600px);
}
}
</style>
</head>
<body>
<div></div>
<input type="button" value="播放" id="play">
<input type="button" value="暂停" id="pause">
<script>
var div=document.querySelector("div");
document.querySelector("#play").onclick=function(){
div.style.animationPlayState="running";
}
document.querySelector("#pause").onclick=function(){
div.style.animationPlayState="paused";
}
</script>
</body>
</html>
