CSS3.过渡与动画属性的整理总结

css3过渡 transition

属性

​ 1. transition-property：检索或设置对象中的参与过渡的属性；

	 默认值：all（能支持过渡属性的都会过渡变换，可单独设置属性）

​ 2. transition-duration：检索或设置对象过渡的持续时间； 单位：s秒或ms毫秒

​ 3. transition-delay：检索或设置对象延迟过渡的时间； 单位：s秒或ms毫秒

​ 4. transition-timing-function：检索或设置对象中过渡的动画类型；

	动画的类型（匀速、匀加速、匀减速...）

​		ease:默认值,慢速开始,中间加速,最后减速.

​        ease-in:慢速开始,逐渐加速;

​        ease-out:以慢速结束,减速效果;

​        ease-in-out:慢速开始，慢速结束;

​        linear:匀速；

常用写法

​ transition: 过渡属性 过渡时间 延迟时间 动画类型；

transition：all 5s 2s linear；

注：transition属性 必须通过鼠标事件触发

案例：结合定位实现简单交互动效

<div class="con">
     <div class="box_1"></div>
     <div class="box_2"></div>
 </div>

		.con{
            width:550px; height:300px;
            background:cadetblue;
            position:relative; overflow:hidden;
        }
        .con .box_1{
            width: 350px; height: 200px;
            position: absolute; left:100px; top:50px;
            background-color: chocolate;
            transition: all 1s ease;
        }
        .con .box_2{
            width: 200px; height: 200px; 
            position: absolute; left:100%; top: 50px; 
            background-color: darkmagenta; 
            transition: all 1s ease;
        }
        .con:hover .box_1{left: 50px; top: 50px; width: 200px;}
        .con:hover .box_2{left:300px;}

最终效果

CSS3.动画 animation

与 transition不同的是 animation不需要鼠标事件触发

属性

animation-name 关键帧名称

animation-duration 动画的持续时间

animation-timing-function 动画运用的类型

linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。	
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
贝塞尔曲线
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
step-start	立刻跳转到下一帧，没有中间动画（常用来做逐帧动画）

animation-delay 动画的延迟

animation-iteration-count 动画运动的次数

（默认1次，infinite无限循环）

animation-direction 运动的方向

​	属性值：
​		-reverse：		反方向运行（让关键帧从后往前运行）

​		-alternate			动画先正着后反着，持续交替运行

​		-alternate-reverse	先反运动再正运动，持续交替运行

animation-play-state 控制动画的暂停与播放

​	属性值：
​		paused暂停

​		running运动（默认）

常用写法

animation：关键帧名称 动画运动的时间 linear；

制定关键帧

@keyframes  关键帧的名称 {
		form{开始状态}   to{结束状态}
					或
		0%{开始状态}.... 100%{结束状态}
}

动画制作流程（案例）

<div class="con">
        <div class="box">动画</div>
</div>

		.con{
            width: 500px; height: 300px;
            background-color: indianred;
            position: relative; overflow: hidden;
        }
        .box{
            width: 80px; height: 80px; border-radius: 50%; background-color: lightskyblue;
            line-height: 80px; text-align: center;
            position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto;
        }

1. 制定关键帧

@keyframes  boxMove {
			0%{transform: translateX(-300px) scale(0.5) rotate(0);}
            20%{transform: translateX(0) scale(1) rotate(360deg);}
            35%{transform: translateX(0) translateY(-20px) scale(1.2) rotate(360deg);}
            50%{transform: translateX(0) translateY(0) scale(1) rotate(360deg);}
            60%{transform: translateX(0) translateY(-20px) scale(1.2) rotate(360deg);}
            75%{transform: translateX(0) translateY(0) scale(1) rotate(360deg);}
            100%{transform: translateX(300px) translateY(0) scale(0.5) rotate(720deg);}
}

2. 调用关键帧

.box{animation: boxMove 5s linear infinite;}

最终效果

总结

1.transition需要鼠标事件（悬浮、焦点、点击）触发，不能自动执行
2.transition只能设置开始和结束两个状态，不能设置中间的状态
3.transition触发一次执行一次，多次执行，需要多次触发
4.animation不需要条件触发，页面加载完成即开始执行
5.animation制定关键帧有两种方式

form（）…to（）		类似transition，从初始状态到结束状态
0%｛｝……100%｛｝		类似flash动画，可以设置多个关键帧，动画更细腻