Css3动画

[yanyue404]

transition

• 官方文档

过渡动画，定义css初始样式开始到结束时候中间过度时间段内的动画效果，可称之为补间动画。

状态

开始状态(动画放在这个状态里面)
结束状态(最终形态)

参数

• transition-property: 规定对哪个属性进行过度,all为默认值

可以指定要进行过渡的css属性,如果提供多个属性值,以逗号进行分隔:

.style {transition-property: opacity, left, top, width;)

• transition-duration 过渡执行时间
• transition-timing-function: 动画执行的速度:

  ease(逐渐变慢) 默认值
  linear匀速
  ease-in(加速)
  ease-out(减速)
  ease-in-out(先加速后减速
  cubic-bezier贝塞尔曲线(x1,y1,x2,y2)

• transition-delay 动画延时执行时间,默认为0

    div {
      transition-property: width;
      transition-duration: 2s;/*过度时间2秒*/
      transition-timing-function: ease;
      transition-delay: 2s;/*y延时2秒开始过度*/
    }

为了书写方便，也可以把这四个属性按照以上顺序简写在一个 transition 属性上：

 div {
      transition: width 2s ease 2s;
    }

如果使用属性的默认值，则可以省略:

 div {
      transition: width 2s;
      /*相当于*/
      /*transition: width 2s ease 0*/
    }

使用transtion属性只是规定了要如何去过渡，要想让动画发生，还得要有元素状态的改变。如何改变元素状态呢，当然就是在css中给这个元素定义一个类（:hover等伪类也可以），这个类描述的是过渡动画结束时元素的状态。

 <div>xiaoyueyue</div>

    
    div {
      width: 200px;
      height: 200px;
      background-color: green;
      border-radius: 100px;
      text-align: center;
      line-height: 200px;
      color: #fff;
      font-weight: 700;
      transition: width 3s, height 3s, background-color 3s, opacity 3s;
    }

    div:hover {
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      background-color: red;
      opacity: 0;
    }

还可以使用自定义类来实现

 div {
      width: 200px;
      height: 200px;
      background-color: green;
      border-radius: 100px;
      text-align: center;
      line-height: 200px;
      color: #fff;
      font-weight: 700;
      transition: width 3s, height 3s, background-color 3s, opacity 3s;
    }

    div.on {
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      background-color: red;
      opacity: 0;
    }

 var box = document.querySelector('div');

    box.onmouseenter = function () {
      box.classList.add('on');
    }

2D转换(transform)

浏览器支持

Internet Explorer 10, Firefox, 和 Opera支持transform 属性.

Chrome 和 Safari 要求前缀 -webkit- 版本.

注意： Internet Explorer 9 要求前缀 -ms- 版本.

功能	书写	补充
1.位移	translate(x,y)	根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移，加单位：如px
2.旋转	rotate(30deg)	(角度设置正值(顺时针),负值(逆时针))
3.缩放	scale(倍数)	整数(大于1)放大 小数(小于1)缩小， scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。
4.倾斜	skew(30deg,45deg)	第一个值垂直方向倾斜,第二个方向代表水平倾斜
5.旋转原点	transform-origin:left top;(以左上角为旋转原点)	改变旋转原点的位置应该一开始就改变 40px 50px;

例子，直径为200的圆鼠标移入后向右移动100px同时颜色渐变为红色：

 div {
      width: 200px;
      height: 200px;
      background-color: green;
      border-radius: 100px;
      text-align: center;
      line-height: 200px;
      color: #fff;
      font-weight: 700;
      transition: background-color 3s, transform 3s;
    }

    .on {
      transform: translate(100px);
      background: red;
    }

3D转换

perspective:1000px; // 透视

取值为眼睛距离图片的距离 600-1000px 是人眼最舒服的距离

设置有两种方式

1. 给父元素设置

2. 作为transform的属性写进transform里面

transform-style:preserve-3d; // 显示出3D效果

3D 位移

1. translateX(30px) // 沿着x轴移动30px
2. translateY(30px) // 沿着y轴移动30px
3. translateZ(30px) // 沿着z轴移动30px

3D 旋转

1. transform-origin:top/bottom/center; // 沿着哪里旋转
2. transform:rotateX(10deg) // 沿着x轴旋转
3. transform:rotateY(10deg) // 沿着y轴旋转
4. transform:rotateZ(10deg) // 沿着z轴旋转

3D 缩放

1. transform-origin:top/bottom/center; // 沿着哪里缩放
2. scaleX(10deg) // 沿着x轴缩放
3. rscaleY(10deg) // 沿着y轴缩放
4. scaleZ(10deg) // 沿着z轴缩放

动画

当在 @Keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

• 规定动画的名称
• 规定动画的时长

关键帧的时间单位

数字：0%、25%、100%等

字符：from(0%)、to(100%)

例子：

@keyframes myfirst
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}
div {
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation-name:myfirst;
	animation-duration:5s;
	animation-timing-function:linear;
	animation-delay:2s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
	animation-play-state:running;
}

像前面讲的transition属性一样，也可以把这些animation属性简写到一个animation中，使用默认值的也可以省略掉。但 animation-play-state 属性不能简写到animation中

div {
    animation:myfirst 5s;
}

参数

含义	属性名
动画名称	animation-name
持续的时间	animation-duration
执行次数	animation-iteration-count(默认为1次,infinite 一直执行)
延时执行的时间	animation-delay:2s
执行的速度	animation-timing-function:inear 匀速 ease 缓冲 ease-in 由慢到快 ease-out 由快到慢 ease-in-out 由慢到快再到慢。cubic-bezier(number,number,number,number)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
动画逆波	animation-direction:alternat动画时间之外的状态
动画时间之外的问题	animation-fill-mode:forwords 停止到动画结束的状态 / backwords (默认)
动画的播放状态	animation-play-state:（ running 播放 和paused 暂停 ）
播放前重置,动画是否重置后再开始播放	animation-direction alternate动画直接从上一次停止的位置开始执行 normal动画第二次直接跳到0%的状态开始执行

注意，为了达到最佳的浏览器兼容效果，在实际书写代码的时候，还必须加上各大浏览器的私有前缀

动画执行完成后触发的事件

当CSS 3的transition动画执行结束时，触发webkitTransitionEnd事件,使用：

dom.addEventListener(‘webkitTransitionEnd’,function(){}) 

animation.css使用

添加cdn引用

  <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">

然后你想要哪个元素进行动画，就给那个元素添加上animated类 以及特定的动画类名，animated是每个要进行动画的元素都必须要添加的类。

给上面的样式添加一个摇动的动画,因为摇动的动画类名为shake，所以代码是这样的：

 var box = document.querySelector('div');

 box.onmouseenter = function () {
  box.classList.add('animated','shake');
}

至于动画的效果有差异可自定义样式进行覆盖

animation.css提供动画的可用class类名

Class Name
bounce	flash	pulse	rubberBand
shake	headShake	swing	tada
wobble	jello	bounceIn	bounceInDown
bounceInLeft	bounceInRight	bounceInUp	bounceOut
bounceOutDown	bounceOutLeft	bounceOutRight	bounceOutUp
fadeIn	fadeInDown	fadeInDownBig	fadeInLeft
fadeInLeftBig	fadeInRight	fadeInRightBig	fadeInUp
fadeInUpBig	fadeOut	fadeOutDown	fadeOutDownBig
fadeOutLeft	fadeOutLeftBig	fadeOutRight	fadeOutRightBig
fadeOutUp	fadeOutUpBig	flipInX	flipInY
flipOutX	flipOutY	lightSpeedIn	lightSpeedOut
rotateIn	rotateInDownLeft	rotateInDownRight	rotateInUpLeft
rotateInUpRight	rotateOut	rotateOutDownLeft	rotateOutDownRight
rotateOutUpLeft	rotateOutUpRight	hinge	jackInTheBox
rollIn	rollOut	zoomIn	zoomInDown
zoomInLeft	zoomInRight	zoomInUp	zoomOut
zoomOutDown	zoomOutLeft	zoomOutRight	zoomOutUp
slideInDown	slideInLeft	slideInRight	slideInUp
slideOutDown	slideOutLeft	slideOutRight	slideOutUp

参考

• https://www.cnblogs.com/2050/p/3409129.html
• http://www.runoob.com/css3/css3-animations.html