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

36次阅读

共计 1495 个字符,预计需要花费 4 分钟才能阅读完成。

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;}
}

正文完
 0