目录
一.CSS过渡动画
transition:要过渡的动画名称(可以填写all表示全部) 花费时间 运动曲线 延迟时间;
tips:谁变化给谁transition
运动曲线:
linear 匀速
ease 匀减速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
多个过渡写法:
//使用英文逗号分隔
transition:过渡动画1 0.5s,过渡动画2 0.1s,...;
二.2D操作
1.2D位移
transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);
tips:
对行内标签无效果
不影响其他元素位置
transform中百分比单位的位移是相当于自身的百分之多少来移动的(我们可以使用该特性来对元素的居中)
2.2D旋转
transform:rotate(度数deg);
正值表示顺时针旋转,负值表示逆时针旋转
默认旋转中心为元素中心点
修改旋转中心点:
transform-origin:left bottom;
以左下角为旋转中心点
3.2D缩放
transform:scale(x,y);
如果我们填写(1,1)那么代表宽高都放大一倍(没有放大)
如果我们填写(2,2)那么代表宽高放大俩倍
如果我们只填写一个值(6),那么相当于(6,6)
缩小写法:(0.5,0.5)
4.2D转换综合写法
transform:translate() rotate() scale()...;
需要注意的一点是位移必须在第一位
假如我们将旋转放在了第一位的话,那么会先执行旋转,那么坐标轴的方向就会改变,坐标轴一改变,那么位移会根据当前指定轴坐标移动,这样就会造成偏移位移方向
三.动画
1.定义动画
@keyframes getanim {
0% {
//动画效果
}
50% {
//动画效果
}
100% {
//动画效果
}
}
//或者
@keyframes getanim {
from {
//动画效果
}
to {
//动画效果
}
}
2.调用动画
当我们定义好了一个动画,我们需要指定一个元素来调用它:
animation-name:动画名称;
animation-duration:持续时间;
animation-timing-function:动画速度曲线(默认ease);
animation-delay:动画延时;
animation-iteration-count:播放次数(无限循环=infinite);
animation-direction:动画在下一周期是否逆播放(默认normal/逆播放=alternate);
//这个属性我们可以配和hover使用,当鼠标移到元素上,暂停动画
animation-play-state:规定运行或暂停(默认running/暂停=pause);
animation-fill-mode:动画结束后状态(保持:forwards/回到起始:backwards)
animation-timing-function:
linear:匀速
ease:低速开始-->匀加速-->匀减速
ease-in:动画低速开始
ease-out:低速结束
ease-in-out:低速开始以及结束
step():指定时间函数中的间隔数量(步长)【常用于逐帧动画】
当然,我们这样一个个设置会疯掉的
动画简写:
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
四.3D操作
1.3D位移
transform:translate3d(x,y,z)
transform:translateX(x)
transform:translateY(y)
transform:translateZ(z)
tips:Z轴一般使用PX单位,并且只要书写transform3d,那么这三个值都不能不写,没有的话写0
2.3D旋转
transform:rotate3d(x,y,z,XXdeg)
transform:rotateX(XXdeg)
transform:rotateY(XXdeg)
transform:rotateZ(XXdeg)
//例子:
transform:rotate3d(1,1,0,45deg)
tips:这里的x,y,z三个值表示旋转轴的矢量,标识希望该轴旋转
上面的例子意思就是x轴,y轴旋转45度,轴不旋转
那么我们有一个疑问,那这俩个轴都旋转想象不出来怎么转的啊
其实我也想象不出来怎么转的,因为根本不是我们想的那样
我们上面说x,y,z三个值表示的是矢量,所以应该是这样的:
3.3D呈现
当我们想去构建一个3D的模型或者制作3D动画,首先是需要开启3D呈现的:
transform-style:flat(子元素不开启3D立体空间)
transform-style:preserve-3d(子元素开启3D立体空间)
使用transform-style属性来控制子元素是否开启三维立体环境
既然是让子元素是否开启,那么这个属性就要给到对应子元素的父元素上
4.透视
perspective:[建议数值为800-1200]
透视的值越大,盒子就越小(也就是说离我们的电脑屏幕就越远)
呈现近大远小的视觉感受,同样也是需要挂载到被观察子元素的父元素身上