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>

• 效果如下：
  

动画的常用属性

动画属性的复合写法：

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

animation: myfirst 5s linear 2s infinite alternate;

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

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

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

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

• 速度曲线表格