html5 小车动画_html5-Animation动画效果

Title

*{

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);

}

}

var div=document.querySelector("div");

document.querySelector("#play").οnclick=function(){

div.style.animationPlayState="running";

}

document.querySelector("#pause").οnclick=function(){

div.style.animationPlayState="paused";

}