CSS3变换与过渡动画：2D/3D效果及应用,-优快云博客

本文链接：https://blog.youkuaiyun.com/g_xlike/article/details/134055042

2d转换

可对元素移动、缩放、转动、拉长

<style>
      .box{
          width:"100px";
          height:"100px";
          transform: translate(10px,20px);
       }
</style>
<body>
   <div class="box"></div>
</body>

常用值

translate(x,y)

也可单独设置，如translateX() ， translateY()。也可以设置负数，负数为方法向。移动

rotate()

顺时针旋转，可设负值，负值逆向转
可单独设置，rotateX() ， rotateY()

scale(宽度,高度)

该元素增加或减少的大小，取决于宽，高的参数。缩放
scaleX()放大宽，scaleY()放大高。设负数为镜像方式

skew(Xdeg,Ydeg)

分别为xX和Y轴的倾斜角度，可以为负数
skew(水平倾斜，垂直倾斜)，skewX() , skewY()

不常用值

matrix()复合属性

有六个属性，包含旋转，缩放，平移和倾斜等功能
transform:matrix(X缩放,Y倾斜,X倾斜,Y缩放,X平移,Y平移);

transform-origin(x,y)

设置旋转中心点
transform-originX() ，transform-originY()

3d转换

特点：进大远小。和2d的值是一样的
transform: translate3d(x, y, z)

rotate3d(x, y, z, deg)

x,y,z三个值旋转的角度
transform: rotate3d(x, y, z, deg)

透视perspective

transform-style:preserve-3d;给父级设置

过渡

简写属性，用于在一个属性中设置四个过渡属性。
transition: css名称|all （第一个若没设置就为all）过渡时间(必须设置) 运动曲线开始时间（延时器）

运动曲线

linear 匀速
ease 慢速开始，中间快，慢速结尾
ease-in 以慢速开始
ease-out 以慢速结束
ease-in-out 以慢速开始，慢速结束

全称

css名称|all：transition-property
过渡时间: transition-duration
运动曲线 : transition-timing-function
开始时间: transition-delay
动画
创建规则

<style>
	@keyframes move{
				0% {
					width: 200px;
					background-color: pink;
				}
				25% {
					background-color: aqua;
					height: 500px;
					width: 500px;
				}
				50% {
					background-color: orange;
					height: 500px;
					width: 500px;
				}
				100% {
					background-color: green;
					height: 500px;
					width: 500px;
				}
			}
</style>

animation

animation-name 名称定义动画
animation-duration 过渡时间定义运动
animation-timing-function 运动曲线

值

linear 匀速
ease 慢速开始，中间快，慢速结尾
ease-in 以慢速开始
ease-out 以慢速结束
ease-in-out 以慢速开始，慢速结束
animation-delay 开始时间
animation-iteration-count：infinite；播放次数：无限次播放；
animation-direction 是否反向播放

值

normal 默认值，动画正常播放
reverse 动画反向播放
alternate 动画在奇数（1、3、5…）正向播放，在偶数（2、4、6…）反向播放
alternate-reverse 动画在奇数（1、3、5…）反向播放，在偶数（2、4、6…）正向播放
animation-fill-mode 是否运用结束样式

值

none 默认值。动画在执行前后不会应用任何样式到目标元素
forwards 在动画结束后（由播放次数决定），动画将应用该属性值
backwards 动画应用在 animation-delay 定义期间启动第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时）
both 动画遵循 forwards 和 backwards 的规则。动画会在两个方向上扩展动画属性
animation-play-state 动画是否暂停或运行
paused 暂停动画
running 正在运行的动画