C3动画及常用属性

C3动画及常用属性

• 动画的制作步骤：
  1. 定义动画
  2. 调用动画

一、定义动画

• 定义动画用keyframes关键字。

    @keyframes 动画名称 {
    	/* 动画开始时的状态 */
    	0% {
    		height: 50px
    	}
  
    	50% {
    		height: 70px
    	}
    	/* 动画结束时的状态 */
    	100% {
    		height: 100px
    	}
  
    }
  

• 其中 0% 50% 100% 被称为动画序列。

二、调用动画

• 哪个元素要使用此动画直接通过动画名称调用。

• 调用动画所用的关键字为：animation-name

    animation-name: 动画名称；
    /* 调用动画后，还必须给该动画完成一个周期所花费的时间（单位为秒或毫秒） */
    animation-duration:持续时间;
  

一个最简单的动画案例如下：

<style>

    /* 1. 定义动画 */
    @keyframes donghua {

		/* 动画开始时的状态 */
		0% {
			height: 50px
		}

		50% {
			height: 100px
		}
		/* 动画结束时的状态 */
		100% {
			height: 200px
		}

	}
    
    div {
        width: 100px;
        height: 100px;
		margin: 100px auto;
        background-color: #00fdad;

        /* 2. 调用动画 */
        animation-name: donghua;
        /* 动画持续时间 */
        animation-duration: 1.5s;
    }
</style>

<div></div>

• 效果如下：
  

动画的常用属性

属性	含义
@keyframes	定义动画
animation	所有动画属性的简写属性，除了animation-play-state属性。
animation-name（必须写）	规定@keyframes动画的名称。
animation-duration（必须写）	规定动画完成一个周期所花费的秒或毫秒 ， 默认是0。
animation-timing-function	规定动画的速度曲线，默认是"ease"。
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite（循环）
animation-direction	规定动画是否在下一-周期逆向播放，默认是"normal ",alternate逆播放
animation-play-state	规定动画是否正在运行或暂停。默认是"running",还有"paused"（暂停）。
animation-fill-mode	规定动画结束后状态,保持forwards，回到起始backwards

动画属性的复合写法：

animation :动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

animation:	动画名称	持续时间	运动曲线	何时开始	播放次数	是否反方向	动画起始或者结束的状态;
animation:	donghua(必填)	1.5s(必填)	ease(默认)	0(默认)	1(默认)，infinite(循环)	normal(默认),alternate(逆向播放)	backwards(回到起始位置)，forwards(停在结束位置)

animation: myfirst 5s linear 2s infinite alternate;

• 简写属性里面不包含animation-play-state(暂停)

• 暂停动画: animation-play-state: puased; 经常和hover配合使用

• 想要动画走回来,而不是直接跳回来: animation-direction : alternate; (逆播放)

• 盒子动画结束后,停在结束位置: animation-fill-mode : forwards; （保持在结束位置）

• 速度曲线表格

值	含义
linear	动画从头到尾的速度是相同的。匀速
ease	默认。动画以低速开始,然后加快,在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
steps()	指定了时间函数中的间隔数量(步长)