Heim >Web-Frontend >HTML-Tutorial >css笔记区分css3中的transform transition animation - 青草圆

css笔记区分css3中的transform transition animation - 青草圆

WBOY
WBOYOriginal
2016-05-21 08:42:361522Durchsuche
出处:http://blog.csdn.net/dyllove98/article/details/8957232
 
CSS3中和动画有关的属性有三个  transform、 transition 和 animation。下面来一一说明:
 
transform  
 
从字面来看transform的释义为改变,使…变形;转换 。这里我们就可以理解为变形。那都能怎么变呢?
none 表示不进行变换;
rotate 旋转            transform:rotate(20deg) 旋转角度可以为负数。需要先有transform-origin定义旋转的基点可为left top center right bottom 或坐标值(50px 70px)。
skew  扭曲             transform:skew(30deg,30deg)  skew(相对x轴倾斜,相对y轴倾斜)
scale  缩放             transform:scale(2,3) 横向放大2倍,纵向放大3倍。如等比放大写一个参数即可。
translate 移动        transform:translate(50px, 50px);
matrix 矩阵变形     基本语法transform: matrix(a, c, b, d, tx, ty);其中a, c, b, d是一个二维矩阵:

 

   ┌     ┐ 
   │ a b │
   │ c d │
   └     ┘
a:X轴缩放比例 b:Y轴倾斜 c:Y轴缩放比例 d:X轴倾斜
 tx, ty就是就是基于X和Y 坐标重新定位元素。其实就是translate (tx,ty)<br><br><br><br><span style="font-family: 'Microsoft YaHei';"><strong><span style="font-size: 16px;">Transition</span></strong></span>  <br><br>W3C标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。
<span class="top11">transition主要包含四个属性值:
<span class="top11">
transition-property: 执行变换的属性;</span></span>
transition- duration:      变换延续的时间:
transition-timing-function:    在延续时间段,变换的速率变化;
transition- delay :变换延迟时间
下面一一说明这四个属性:
<span class="top11">transition-property</span>

语法:

transition-property : none | all | [ ]

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

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,min-width,min- height,max-width,max-height,line-height,height,background-position等属性;

4、integer 离散步骤(整个数字),在真实的数字空间,以及使用floor()转换为整数时发生,如:outline-offset,z-index等属性;

5、number真实的(浮点型)数值,如:zoom,opacity,font-weight等属性;

6、transform list:详情请参阅:《CSS3 Transform》。

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):只支持下面的情况:从gradient到gradient以及color到color,然后工作与上面类似;

12、space-separated list of above:如果列表有相同的项目数值,则列表每一项按照上面的规则进行变化,否则无变化;

13、a shorthand property:如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化。

支持执行transition效果的属性:

Property Name Type
background-color as color
background-position as repeatable list of simple list of length, percentage, or calc
border-bottom-color as color
border-bottom-width as length
border-left-color as color
border-left-width as length
border-right-color as color
border-right-width as length
border-spacing as simple list of length
border-top-color as color
border-top-width as length
bottom as length, percentage, or calc
clip as rectangle
color as color
font-size as length
font-weight as font weight
height as length, percentage, or calc
left as length, percentage, or calc
letter-spacing as length
line-height as either number or length
margin-bottom as length
margin-left as length
margin-right as length
margin-top as length
max-height as length, percentage, or calc
max-width as length, percentage, or calc
min-height as length, percentage, or calc
min-width as length, percentage, or calc
opacity as number
outline-color as color
outline-width as length
padding-bottom as length
padding-left as length
padding-right as length
padding-top as length
right as length, percentage, or calc
text-indent as length, percentage, or calc
text-shadow as shadow list
top as length, percentage, or calc
vertical-align as length
visibility as visibility
width as length, percentage, or calc
word-spacing as length
z-index as integer
 

 

transition-duration

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

transition-timing-function

  取值:

transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率,transition-timing-function有6个可能值:

1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0);

2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0);

3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0);

4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0);

5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0);

6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。

其是cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值,如下曲线所示,通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default。

transition-delay

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

有时我们不只改变一个CSS效果的属性,而是想改变两个或者多个CSS属性的transition效果,那么我们只要把几个transition的 声明串 在一起,用逗号(“,”)隔开,然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点:transition-delay与 transition-duration的值都是时间,所以要区分它们在连写中的位置,一般浏览器会根据先后顺序决定,第一个可以解析为时间的怭值为 transition-duration第二个为transition-delay。如:

   a {transition: background 0.5s ease-in,color 0.3s ease-out}

如果你想给元素执行所有transition效果的属性,那么我们还可以利用all属性值来操作,此时他们共享同样的延续时间以及速率变换方式,如:

a{transition: all 0.5s ease-in}

}

 

 animation  

顾名思义为动画的意思。Animation应用在页面DOM上 使其产生动画的效果。在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生。

一个官网的示例:

@-webkit-keyframes 'wobble' {
     0% {
        margin-left: 100px;
        background: green;
     }
     40% {
        margin-left: 150px;
        background: orange;
     }
     60% {
        margin-left: 75px;
        background: blue;
     }
     100% {
        margin-left: 100px;
        background: red;
     }
  }

  

这里我们定义了一个叫“wobble”的动画,名字任意取。分几个阶段0% 40% 60% 100% 来过渡。

keyframes定义好了以后,就可以去调用定义好的动画“wobble”了。

下面我们来看看怎么给一个元素调用animation属性

.demo1 {
     width: 50px;
     height: 50px;
     margin-left: 100px;
     background: blue;
     -webkit-animation-name:'wobble';/*动画属性名,也就是我们前面keyframes定义的动画名*/
     -webkit-animation-duration: 10s;/*动画持续时间*/
     -webkit-animation-timing-function: ease-in-out; /*动画频率,和transition-timing-function是一样的*/
     -webkit-animation-delay: 2s;/*动画延迟时间*/
     -webkit-animation-iteration-count: 10;/*定义循环资料,infinite为无限次*/
     -webkit-animation-direction: alternate;/*定义动画方式*/
  }  

<strong>animation-name:</strong>
animation-name:是用来定义一个动画的名称,为Keyframes中的名称,否则不会有动画效果。none为默认值,当值为none时,将没有任何动画效果。另外我们这个属性跟前面所讲的transition一样,我们可以同时附几个animation给一个元素,我们只需要用逗号“,”隔开。

CSS3的animation类似于transition属性,他们都是随着时间改变元素的属性值。他们主要区别是transition需要触发一 个事件(hover事件或click事件等)才会随时间改变其css属性;而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来 改变元素css的属性值,从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation的动画属性,基于这一点,css3的 animation就需要明确的动画属性值,这也就是回到我们上面所说的,我们需要keyframes来定义不同时间的css属性值,达到元素在不同时间 段变化的效果。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn