css3新特性——过渡、动画

---

一、过渡 transition

目的是让一些交互效果（主要是hover动画），变得生动一些，不会显得那么生硬。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果，必须规定两项内容：

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

transition是以下四个属性的简写

• transition-property：指定要添加过渡效果的CSS属性，可以是none(没有属性)，或all(所有属性)
• transition-duration ：定义过渡效果花费的时间。默认是 0
• transition-timing-function：规定过渡效果的时间曲线。默认是 “ease”，具体属性可以看菜鸟教程中的示范
• transition-delay： 规定过渡效果何时开始。默认是 0

当需要同时给两种css属性添加过渡时，用逗号隔开

transition: width 0.5s, height 1s;

即width过渡时间0.5s， heigh过渡时间1s

eg.1

/*宽度从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒，0.2秒后执行过渡*/
transition：width 0.5s ease 0.2s;

eg.2

第一个按钮使用了过渡，更生动
两种方法都可以：

transition: all/background-color 0.5s;

transition-duration: 0.5s;

二、动画

通过animation指定动画名和动画参数，@keyframes定义动画内容，根据参数自动触发

创建动画的原理是：将一套 CSS 样式逐渐变化为另一套样式。

扫描二维码关注公众号，回复： 12453310 查看本文章

animation是以下属性的简写：

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

animation属性使用必须有两个属性：

1. 规定动画的名称(animation-name)
2. 规定动画的时长(animation-duration)

div
{
    
    
	width:100px;
	height:100px;
	background:red;
	animation:move 4s;
}

动画必须配合@keyframes使用，animation命名后(如上move)

@keyframes (move)
{
    
    
	from {
    
    css1}
	to {
    
    css2}
}

从css1 变化到 css2，共用时4s
或

@keyframes (move)
{
    
    
	0%   {
    
    css1}
    25%  {
    
    css2}
    50%  {
    
    css3}
    100% {
    
    css4}
}

百分数是总时间对应的百分比，共4s，0s时是css1，0-1s变化到css2，1-2s变化到css3，2s-4s变化到css4
因为animation的其他属性是默认值，执行到css4后会自动回到css1的样式

配合其他属性可以实现许多纯css3的炫酷动画

eg.

	<div>
        <div class="move1"></div>
        <div class="move2"></div><br>
        <div class="move3"></div>
        <div class="move4"></div>
	</div>

div>div
{
    
    
	display: inline-block;
	width: 15px;
	height: 15px;
	background: #000;
	opacity: 1;
	animation: demo 2.8s infinite;/* infinite指定动画无限重复，是animation-iteration-count属性值*/
	opacity: 0;
}
@keyframes demo{
    
    
	0% {
    
    
  	  	opacity: .5;
   	 	background: #000;
	}
	30% {
    
    
    	opacity: .5;
    	background: #666;
	}
	60% {
    
    
    	opacity: 0;
	}
	75% {
    
    
    	opacity: 0;
	}
	100% {
    
    
    	opacity: .5;
    	background: #000;
	}
}
	.move2{
    
    
    animation-delay: .7s;
	}
	.move3{
    
    
	animation-delay: 2.1s;
	}
	.move4{
    
    
	animation-delay: 1.4s;
	}

用各模块延迟做到loading图标效果