Transform（变换）

Transform属性能够将元素进行2D或3D转换，能够将元素旋转，缩放，挪动，歪斜等。
语法:

transform: none|transform-functions;

罕用的Transform的办法有：

  1. rotate(angle)
    将元素旋转特定角度；例如，transform:rotate(30edg)，旋转30度；
  2. translate(x,y)
    将元素从以后地位向x轴y轴挪动x或y个地位；例如，transform:translate(20px,30px)，向右挪动20px，向下挪动30px；
  3. scale(x,y)
    进行缩放，依据给定的x和y，在x轴或者y轴进行缩放；例如，transform:scale(0.5,2)，在轴放大一半，在y轴放大一倍；
  4. skew(x-angle,y-angle)
    依据x轴和y轴转动给定的角度；例如，skew(30deg,20deg)，围绕x轴把元素转动30度，围绕y轴把元素转动20度。

transition（过渡）

transition 为以后元素设置过渡成果。经常搭配:hover等能够引起元素属性变动的伪类一起应用，能够将元素的单个或多个属性的值A平滑的过渡为值B。
语法：

transition: property duration timing-function delay;

transition的属性有：

  • property： 值为all 或者 none 或者 指定CSS属性的name，指定过渡会变动的css属性；
  • duration： 过渡继续的工夫，须要多少秒或毫秒能力实现（必填）；
  • timing-function： 过渡成果的转速曲线（加速度）；
  • delay： 过渡成果开始的工夫，提早多少工夫开始；

例子：

div{    width:100px;    transition: width 2s;    -webkit-transition: width 2s; /* Safari */}div:hover {width:300px;}

animation（动画）

animation 属性是一个简写属性，用于设置一个关键帧属性和六个动画属性。
语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

这一个关键帧属性和六个动画属性别离是：

  • name： 要绑定到选择器的关键帧的名字
  • duration： 动画继续的工夫；
  • timing-function：动画成果的转速曲线（加速度）；
  • delay： 动画成果开始的工夫，提早多少工夫开始；
  • iteration-count： 定义动画播放次数，默认是1，能够设置为infinite始终播放；
  • direction： 指定是否应该轮流反向播放动画，以及怎么正向反向播放动画；
  • fill-mode： 规定当动画不播放时，元素的款式；
  • play-state： 指定动画是否正在运行或已暂停，默认为running，设置paused暂停；

@keyframes
咱们须要应用@keyframes规定来定义关键帧，应用@keyframes规定，能够创立动画。
创立动画是通过逐渐扭转CSS款式来实现的。
能够应用关键字"from"和"to"来规定第一帧和最初一帧，也能够应用百分比来规定某一时间的某一帧。
例如：

@keyframes myanimation{    from {left:0px;}    to {left:200px;}}
@keyframes mymove{    0%   {top:0px;}    25%  {top:200px;}    50%  {top:100px;}    75%  {top:200px;}    100% {top:0px;}}