transform、transition 和 animation的详细讲解

转载:https://segmentfault.com/a/1190000004460780

 

关于CSS3制作动画的几个属性:

变形(transform),移动、缩放、旋转(0.2毛特效)

转换(transition),需要事件触发,只能一次(0.5毛特效)

动画(animation),动画,可一直执行(1毛特效)

一、transform

属性:

旋转rotate(中心为原点)
扭曲、倾斜skew(skew(x,y), skewX(x), skewY(y))
缩放scale(scale(x,y), scaleX(x), scaleY(y))
移动translate(translateX,translateY)
矩阵变形matrix

各个属性的用法:

  • transform:rotate():旋转;其中“10deg”表示“10度”。


    transform: rotate(10deg);
  • transform:skew():倾斜;


transform: skew(20deg);

 

  • transform:scale():比例;“1.5”表示以1.5的比例放大,如果要放大2倍,须写成“2.0”,缩小则为负“-”。

transform: scale(1.5);

 

  • transform:translate():变动,位移;如下表示向右位移120像素,如果向上位移,把后面的“0”改个值就行,向左向下位移则为负“-”。

transform: translate(120px,0);

 

  • 综合在一起:(效果是动态)


.demo{    -webkit-transition:all 1s ease-in-out;    -moz-transition:all 1s ease-in-out}
.demo:hover{    -webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);    -moz-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(100px,0)}

二、transition

css的transition允许css的属性值一定的时间区间平滑地过渡。

四个属性:

  1. transition-property是用来指定当元素其中一个属性改变时执行transition效果,其主要有以下几个值:none(没有属性改变);all(所有属性改变)这个也是其默认值;indent(元素属性名)。当其值为none时,transition马上停止执行,当指定为all时,则元素产生任何属性值变化时都将执行transition效果,ident是可以指定元素的某一个属性值。

  2. transition-duration是用来指定元素,转换过程的持续时间

  3. transition-timing-function:

  4. transition-delay[延迟] :是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果

综上所述,相对应的一个示例代码:

  a {
    transition: background 0.5s ease-in,color 0.3s ease-out;
    transition:transform .4s ease-in-out;
  }

所支持的属性

  1. color: 通过红、绿、蓝和透明度组件变换(每个数值处理)如:background-color,border-color,color,outline-color等css属性;
  2. length: 真实的数字 如:word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等属性;
  3. percentage:真实的数字 如:word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等属性;
  4. integer离散步骤(整个数字),在真实的数字空间,以及使用floor()转换为整数时发生 如:outline-offset,z-index等属性;
  5. number真实的(浮点型)数值,如:zoom,opacity,font-weight,等属性;
  6. transform list
  7. rectangle:通过x, y, width 和 height(转为数值)变换,如:crop
  8. visibility: 离散步骤,在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”,如:visibility
  9. shadow: 作用于color, x, y 和 blur(模糊)属性,如:text-shadow
  10. gradient: 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型(放射状的或是线性的)和相同的停止数值以便执行动画,如:background-image
  11. paint server (SVG): 只支持下面的情况:从gradientgradient以及colorcolor,然后工作与上面类似
  12. space-separated list of above:如果列表有相同的项目数值,则列表每一项按照上面的规则进行变化,否则无变化
  13. a shorthand property: 如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化

三、animation(@keyframes规则)

CSS3中添加的新属性animation是用来为元素实现动画效果的,但是animation无法单独担当起实现动画的效果。承载动画的另一个属性——@keyframes。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。

  • 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。

  • 通过 @keyframes 规则,您能够创建动画。

  • @keyframes定义一个动画,并定义具体的动画效果,比如是放大还是位移等等。

  • @keyframes 它定义的动画并不直接执行,需要借助animation来运转。

  • 在动画过程中,您能够多次改变这套 CSS 样式。

  • 以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。

    百分比是指动画完成一遍的时间长度的的百分比 ,0% 是动画的开始时间,50%是动画完成一半的时间,100% 动画的结束时间。百分比后面的花括号写:在动画执行过程中的某时间点要完成的变化。
  • 为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。


语法

    @keyframes animationname {keyframes-selector {css-styles;}}
描述
animationname 必需。定义动画的名称。
keyframes-selector 必需。定义动画的名称。
合法的值:
1. 0-100%
2. from(与 0% 相同)
3. to(与 100% 相同)
css-styles 必需。一个或多个合法的 CSS 样式属性。

例子1:

名字为gif@keyframes ,动画完成需要的总时长为1.4s,刚开始的时候图片旋转为0度,动画完成的时候图片旋转360度

.load-border {
    width: 120px;
    height: 120px;
    background: url(../images/loading_icon.png) no-repeat center center;
    -webkit-animation: gif 1.4s infinite linear;
    animation: gif 1.4s infinite linear; 
}
@keyframes gif {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

例子2:

名字为mymove@keyframes ,动画完成需要的总时长为1s,刚开始的时候图片距顶部距离为0px0.25s后图片距顶部距离为200px0.5s后图片距顶部的距离为100px,以此类推

.img {
    width: 120px;
    height: 120px;
    background: url(../images/icon.png) no-repeat center center;
    -webkit-animation: gif 1.4s infinite linear;
    animation: mymove 1s infinite linear;
}
@keyframes mymove
{
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
}

例子3:

在一个动画中改变多个 CSS 样式:

@keyframes mymove
{
    0%   {top:0px; background:red; width:100px;}
    100% {top:200px; background:yellow; width:300px;}
}

 

阅读更多

没有更多推荐了,返回首页