动画和变形

 

1. 盒子动画

简单动画

认识简单动画

简单动画的常见应用

渐变时间函数:transition-timing-function

CSS属性以何种速度进行渐变

贝塞尔曲线:cubic-bezier:贝塞尔曲线是由四个参考点绘制而成的曲线;在CSS中,第一个点和第四个点已固定,用户可以设置第二和第三个点;曲线的纵坐标表示渐变轨迹,横坐标表示时间;

示例:transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)

贝塞尔曲线的预设值:easeease-inease-outease-in-outlinear

2 复杂动画

CSS实现大象行走

涉及到的属性

animation-name:动画名称
animation-duration:单次动画总时长

animation-timing-function:时间函数

animation-delay:播放前延时的时长
animation-iteration-count:播放次数: 特殊值:infinite}animation-direction:播放顺序: normal:正常播放; alternate:轮流反向播放

animation库:https://daneden.github.io/animate.css/

2. 盒子变形

1 变形概述

什么是变形

如何变形

2 变形详解

定义原点

变形的种类

旋转(rotate)
缩放(scale)

移动(translate)

倾斜(skew)

多重变形

3 其他属性

透视距离:perspective

观察者距离Z轴原点的距离,设置该属性,会制造透视效果

可继承

该属性设置到变形元素的父元素上

背面可见性:backface-visibility

visible:默认值,背面可见

hidden:背面不可见

原文地址:https://www.cnblogs.com/qilin0/p/11400833.html