css3动画的简单学习

transform常用的属性（2D变化）：

translate(x,y) 定义 2D 转换。

scale(x,y) 定义 2D 缩放转换

rotate(angle) 定义 2D 旋转，在参数中规定角度。

translate定义元素在空间中的移动。对于x方向来说，向右移动，取值为正，对于y方向来说，向下移动为正值。

scale定义元素在空间中的缩放比例。默认是基于元素的中心为来缩放。

rotate定义元素在空间中的旋转。以前初中学课本中把逆时针旋转形成的角度叫做正角,把顺时针旋转的角度叫做负角。但是在css变换中，x轴的方向是从左到右的，y轴的方向是从上到下，与课本中的坐标方向相反，所以旋转角度的正负定义与以前学过的定义正好相反即顺时针为正，逆时针为负。

animation常用的属性

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-fill-mode

• animation-name
  
  需要使用的keyframes规则名称，通常在keyframes规则中创建动画的具体细节。
• animation-duration
  
  完成整个动画所持续的时间。通常以s或者ms为单位，记得添加单位。
• animation-timing-function
  
  设置动画的速度变化曲线

1. ease:默认值。该属性值使得动画的速度在动画开始和结束时比较慢，动画执行中间速度较快。
2. ease-in:动画开始时的速度比较慢，随后加快。
3. ease-out：动画在结束的时候速度比较慢。
4. ease-in-out：动画慢速开始和结束的过渡效果
5. linear：从开始到结束都是同样的速度。
6. cubic-bezier(n,n,n,n)：在函数中自己定义曲线的值。使用的频率较少,可以使用工具网站来根据自己的需要定制不同的曲线。

• animation-delay
  
  设置动画开始之前等待的时间。与动画持续时间类似，单位为s或者ms。
• animation-iteration-count
  
  设置动画的播放次数。可以通过具体的数字来指定动画的播放次数，也可以通过css3规定的属性值infinite来设置动画无限次播放。
• animation-direction
  
  设置动画是否需要反向播放。

1. normal：默认值。设置动画应该正常播放，不需要反向播放。
2. alternate：通常运用在无限次播放动画的情境中，动画循环播放时，每次都是从结束状态跳回到起始状态，感觉很突兀，该属性可以设置动画在动画执行完成之后，反向运动到动画起点，。

• animation-fill-mode
  
  该属性主要用来设置动画在开始（设置延迟属性的情况下）和结束的状态下需要显示的效果。

none：动画完成之后回到动画没开始时的状态。

forwards：当动画完成时，元素的样式将保持keyframes最后一个关键帧中定义的样式。

backwards：在 animation-delay属性所指定的时间内，元素的样式将设置为keyframes中设置的第一帧的样式。

both：同时设置了forwards和backwards属性。即在动画等待的时间内，元素的样式为keyframes设置的第一帧的样式，动画结束时，元素的样式将保持最后一帧的样式。

基本的动画效果

元素飞入（上、下、左、右）

元素的透明度逐渐变化，同时位置也在不断变化。以从左边飞入为例：

div{
    width: 100px;
	height: 100px;
	margin:80px 0 0 200px;
	background-color: #4993c8;
	animation: fadeInLeft 1000ms ease 5000ms both ;
}
@keyframes fadeInLeft {
      0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
      }
      100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }

元素进入页面后左右晃动

元素进入页面后，在元素位置附近做振幅较小的晃动。以从左边进入为例：

div{
    width: 100px;
	height: 100px;
	margin:80px 0 0 200px;
	background-color: #4993c8;
	animation: fadeInLeft 1000ms ease 5000ms both ;
}
 @keyframes slideRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-150%);
    transform: translateX(-150%);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateX(8%);
    transform: translateX(8%);
  }
  65% {
    -webkit-transform: translateX(-4%);
    transform: translateX(-4%);
  }
  80% {
    -webkit-transform: translateX(4%);
    transform: translateX(4%);
  }
  95% {
    -webkit-transform: translateX(-2%);
    transform: translateX(-2%);
  }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

淡入强调

透明度逐渐变化，尺寸先变大后变小，最后恢复正常尺寸

1、透明度变化

2、基于原来的尺寸缩放

div{
    width: 100px;
	height: 100px;
	margin:80px 0 0 200px;
	background-color: #4993c8;
	animation: fadeInLeft 1000ms ease 5000ms both ;
}
@keyframes fadeIn {
  0% {
    -webkit-transform: scale(0) translateZ(0);
    transform: scale(0) translateZ(0);
    opacity: 0;
  }
  60% {
    -webkit-transform: scale(1.1) translateZ(0);
    transform: scale(1.1) translateZ(0);
    opacity: 1;
  }
  80% {
    -webkit-transform: scale(0.9) translateZ(0);
    transform: scale(0.9) translateZ(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
    opacity: 1;
  }
}

元素旋转淡入

1、旋转。顺时针旋转需要设置初始的旋转角度为负值，反之亦然。

2、透明度发生变化

div{
    width: 100px;
	height: 100px;
	margin:80px 0 0 200px;
	background-color: #4993c8;
	animation: rotateIn 1000ms ease 5000ms both ;
}
@-webkit-keyframes rotateIn {
  from {
    opacity: 0;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
  }
  to {
    opacity: 1;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
// 可以通过transform-origin属性来设置旋转元素的基点位置

页面箭头重复运动

主要通过animation的animation-iteration-count属性来规定动画无限次播放

思路1：设置动画移动的起始位置和终点位置，同时设置animation的animation-direction属性为alternate，轮流反向播放动画。

思路2：动画运动分成3个关键点，起始位置、50%位置和100%位置，100%时间点的位置与开始位置相同，不用设置animation的nimation-direction属性

.arrow{
    position: absolute;
    left: 50%;
    bottom: 20px;
    margin-left: -20px;
    width: 40px;
    height: 24px;
    background: url('../images/arrow.png') 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: 999;
    animation:arrowing1 1000ms ease-in-out infinite alternate;
    // animation:arrowing2 1000ms ease-in-out infinite;
}
@keyframes arrowing1 {
    0% {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
    100% {
      -webkit-transform:translate3d(0,20px,0);
      transform:translate3d(0,20px,0);
    }
}
@keyframes arrowing2 {
    0% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
    50% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
        opacity: 1
    }
    100% {
       -webkit-transform: translateY(-5px);
        transform: translateY(-5px)
    }
}