CSS3一览(2) 变形和动画

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lqadam/article/details/52458293

CSS3的新功能我也看了一一些,做了一个简要的笔记,总结一下,当成学习笔记发上来,这是CSS3的第二篇了。


变形transform

  1. 变形原点:transform-origin

格式:transform-origin:x y z

说明

说明

X

Y

可能的值:表位置的left、top、right、bottom、center,表长度的length(px),表百分比的%

Z

可能的值:length(px)

 

  1. translate:定义转换

格式:transform:translate(20px,50px):表示水平向右移20px,垂直向下移动50px,可以省略一个参数表示只水平移动

此外还有translate3d,定义3d转换,translateX、translateY、translateZ只转换一个方向

 

  1. rotate:定义旋转

格式:transform:rotate(30deg)表示围绕原点顺时针旋转30度

和translate一样,此函数拥有很多拓展版本

 

  1. scale:定义缩放

格式:transform:scale(150%,50%) 表示水平放大到150% 垂直缩小到50%

同样拥有~3d、~X、~Y、~Z拓展版本

 

  1. skew:定义倾斜

格式:transform:skew(30deg,0deg) 表示沿着原点水平倾斜30度,垂直不倾斜

同样拥有拓展版本

 

 

过渡动画  transision

格式:transition:property duration timing-function delay

例子:transition:color 0.25s ease-in;

说明:

属性

说明

Property

规定过度动画作用的CSS属性  比如color、background等

Duration

过渡动画持续的时常

Timing-function

过渡动画的速度曲线,有预设值:ease、linear、ease-in、ease-out、ease-in-out,以及通过贝塞尔曲线函数设置:cubic-bezier(n,n,n,n)-n

Delay

定义过渡动画从何开始

 

自定义动画 animation

格式:animation:name duration timing-function delay iteration-count direction

例子:

@keyframesanim{

0%{

left:0;

}

50%{

left:50%;

transform:rotate(3600deg)scale(2,2);

color:red;

}

100%{

left:0;

}

}

animation:anim6s ease-out infinite;

说明:

说明

@keyframes

定义一个动画,格式为@keyframes: name{selector {css-styles;}};其中selector取值可以是百分比,也可以是from(=0%)、to(=100%)

Name

keyframes的名字

Duration

持续时常

timing-function

速度曲线,有预设值:ease、linear、ease-in、ease-out、ease-in-out,以及通过贝塞尔曲线函数设置:cubic-bezier(n,n,n,n)-n

Delay

定义从何开始,延迟

iteration-count

动画的播放次数,infinite参数表示无限次播放

Direction

表示是否要反响播放动画

animation-paly-state

规定动画正在运行或停止,需要单独写出来的属性


展开阅读全文

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