HTML实现动画

HTML 实现简单动画

CSS3 animation 属性

CSS3 transition 属性

Javascript 帧动画

很多前端新入门的同学都不太懂如何去实现一个简单的动画，比如轮播图效果等，当初我也是，初学者还不知道有组件库这东西，什么效果都是自己去写，又不懂得如何写，只能去找，有不知道有哪些方法，如 animation 和 transition 属性都能帮我们实现，但不一定认识它，css属性很多很多，我到现在都不知道自己认识多少，今天我来说说我所了解到的几个方法，希望能帮助其他同学。

CSS3 animation 属性

animation 属性是css3新加入的特性，使用animation 还需要一个属性@keyframes

• @keyframes 规则是创建动画。

• @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

需要使用@keyframes 来创建一个动画，并确定它的变化，比如：

/* myfirst 为自定义的动画名，会在animation属性中使用 */
/* from 是元素当前的模样，to是元素将要改变的模样 */
/* 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 */
@keyframes myfirst
{
	/* 样式可写多个 */
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

/* 也可以用百分比来声明将要变化的模样 */
@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

先用@keyframes 声明一个动画，在用animation来使用它

/* 
	指定至少这两个CSS3的动画属性绑定向一个选择器：
	规定动画的名称
	规定动画的时长 
	myfirst就是定义好的动画名称 
	5s 是动画执行的时间
	*/
	div
	{
	    animation: myfirst 5s;
	    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
	}

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay	规定动画何时开始。默认是 0
animation-iteration-count	规定动画被播放的次数。默认是 1
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
div
{
	animation: myfirst 5s;
}

这是一个简单的动画实现，但还不是完整的，还需要确定它要执行几次，执行后的状态是怎么样的，如果你单单只用上面的简单代码，动画会执行一次，执行完后，又会变回元素的初始状态，如果想要元素停留在执行后的状态，需要使用animation-fill-mode：forwards这个属性来定义。
比如，我们需要把元素扩大，如果没有animation-fill-mode：forwards这个属性，元素在规定时间扩大完成后又会变回原来的样子，加了animation-fill-mode：forwards这个属性，元素就会停留在变化后的样子。

动画的使用一般伴随着事件的发生，比如点击事件，希望在点击某元素的时候执行动画，可以动态的修改css样式，或者定义好选择器，动态为某元素添加选择器来实现事件触发。

CSS3 transition 属性

transition是css3新增的过渡属性，可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
要实现这一点，必须规定两项内容：

• 指定要添加效果的CSS属性
• 指定效果的持续时间。

/* 应用于宽度属性的过渡效果，时长为 2 秒： */
/* 当元素的宽度发生变化时，元素会以动画的形式变化，用时两秒 */
div
{
	width: 100px;
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}

/* 这个实现的效果是，单鼠标浮动在div元素上时，div元素宽度会从100px慢慢
	变化为300px，两秒的时间*/
div:hover
{
    width:300px;
}

/* 可以多项属性一起变化 */
div
{
    transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。

transition-property: 值

• none 没有属性会获得过渡效果
• all 所有属性都将获得过渡效果。
• property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

Javascript 帧动画

如果我们要把一个元素的位置移动一定的距离，它会一下子就改变了位置，我们看不到它的移动效果，如果把它放慢移动，就是每次移动一段很小的距离，分多次移动，那我们就可以看到它的移动效果了。一般认为我们眼睛看到的动画为60帧，60帧就是1秒可以移动60次。

	/* 简单写一下移动动画 */
	let dv = document.getElementById("dv"); //元素dom节点
	let duration = 2;  // 元素移动所用的时间
	let x= 0; // 元素的初始位置
	let direction = 300; // 元素要移动的距离
	let sc = direction-x/(duration*60); // 元素每次移动的距离
	
	
	let time = setInterval(function(){
		if(x>= 300){
			clearInterval(time);
			return;
		}
		x+= sc;
		dv.style.transform = `translateX(${x}px)`;
	},1000/60) // 1000/60 每帧的时间

上面三种方法可以简单实现动画效果，还有其它的方法我就不写了，复杂动画都是由简单动画连接起来的。

此文章只为记录，如果有错误，欢迎指正。