CSS3动画

Posted 2021-04-09 web前端知识大全

一、CSS3变形-transform

CSS3中可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理。在css3中通过transform属性，来实现transform功能

如何使用transform功能

• transform：功能

• -ms-transform：功能/*IE 9*/

• -moz-transform：功能/*火狐*/

• -webkit-transform：功能/*chrome*/

• -o-transform：功能/*Opera*/

scale缩放转换，使用方法：

transform：scale(值)，他的值是指定的缩放倍率，比如0.5就是缩放到50%，1就是100%，1.5就是放大150%

• scale(x,y) 使元素X轴和Y轴同时缩放

• scaleX(x) 使元素仅X轴缩放

• scaleY(y) 使元素仅Y轴缩放

rotate旋转，在参数中规定角度，使用方法如下：

• -ms-transform：rotate(角度)；/*IE 9*/

• -moz-transform：rotate(角度)；/*火狐*/

• -webkit-transform：rotate(角度)；/*chrome*/

• -o-transform：rotate(角度)；/*Opera*/

  
  

translate移动，使用方法：transform:tralslate(值)，他的值是指定移动的距离  

• translateX(x)  仅水平方向移动（x轴移动）

• translateY(y)  仅垂直方向移动（y轴移动） 

• tanslate(x,y)  水平方向和垂直方向同时移动（X轴和Y轴同时移动），当只有一个参数，只在水平方向上移动 

  

skew倾斜，使用方法：transform：skew(值) 他的值是角度

 多种方法连写：transform：方法1，方法2，方法3

transform-origin 设置变形的中心点 

     如：transform-origin:left  top;transform-origin:20px 50px;

二、CSS过渡-transition

如何使用transition

1. transition：语法；

2. -moz-transition：语法；/*火狐*/

3. -webkit-transition：语法；/*chrome*/

4. -o-transition：语法；/*Opera*/

transition:过渡属性  时间  运动方式  动画延迟

1. transition-property  设置过渡的属性，比如：width  height  background-color（是在宽度上做动画还是在高度上亦或是背景上）

2. transition-duration  设置过渡的时间，比如：1s  500ms

3. transition-time-function  设置过渡的运动方式

• linear  匀速

• ease  开始和结束慢速

• ease-in  开始时慢速

• ease-out  结束时慢速

• ease-in-out 开始和结束时慢速

transition-delay  设置动画的延迟

使用transition和Animations的区别：

• transition只能通过指定属性的开始值与结束值，然后通过两属性值之间进行平滑过渡的方式来实现动画，所以transition不能实现复杂的动画效果。

• animation功能是通过关键帧以及某个关键帧中的属性值来实现更为复杂的动画效果。
  

三、CSS3 animation动画：通过改变元素的属性值来实现动画效果（直接进行动画，不需要触发）

animation:动画名称 动画持续时间 动画运动方式 动画开始延迟时间 动画应用次数 动画结束后是否按原路返回 动画前后的状态;同时设置多个属性

如：animation:moving 1s ease 1s 6 alternate forwards;

1. @keyframes 定义关键帧动画  

        如：@keyframes  动画名{

        　　　　from{属性：属性值}

        　　　　to{属性：属性值}

                        或者是0%~100%

        }

1. animation-name  动画名称

2. animation-duration  动画时间

3. animation-timing-function 动画曲线

• linear  匀速

• ease  开始和结束慢速

• ease-in  开始时慢速

• ease-out  结束时慢速

• ease-in-out 开始和结束时慢速

• steps 动画步数

  4、animation-delay 动画延迟

  5、animation-iteration-count 动画播放次数 n|infinite

  6、animation-direction:normal 默认动画结束不返回/alternate 动画结束后返回

  7、animation-play-state 动画状态

• paused 停止

• running 运动

 8、animation-fill-mode  动画前后的状态

• none 不改变默认行为

• forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）

•  backwards 在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）

四、CSS动画-多列

1. 在CSS3中，可以创建多列来对文本或者区域进行布局

2. 属性

• column-count：分列的数量

• column-gap：每列之间的间距

• column-rule：每一列间隔中间的线，以及线的颜色都可以设置

• column-width：每一列的宽度

实例

使用CSS3多列实现瀑布流效果

效果图：

css样式

html结构

五、3D转换