乐趣区

关于css3:CSS-的-TransformTransition-Animation-简单理解使用

jiezi

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;}
}
退出移动版