过渡transition
transition: property duration timing-function delay; 过渡效果属性，运行时间，运行速度，何时开始
默认执行时间是0
transition:1s 如果只填写时间则默认全部all
过渡属性transition-property
-
单个或多个属性，多个用逗号隔开
-
none 没有属性过渡效果
-
all 所有 耗性能
过渡时间 transition-duration
-
默认0 没有过渡效果
-
单位s或ms
执行曲线 transition-timing-function
-
默认ease 开始慢-中间快-结束慢
-
linear匀速
-
ease-in 开始慢-结束快
-
ease-out 开始快-结束慢
div {
width: 100px;
height: 100px;
background: blue;
transition: width 2s;
}
div:hover {
width: 300px;
}2D变化transform
translate
-
一个参数 代表x轴 y默认0
-
两个参数 第一个x 第二个y 正数x 向右 正数y向下
-
偏移量参考左上角
-
执行完成后将会还原
div {
width: 100px;
height: 100px;
background: blue;
transition: transform 2s;
}
div:hover {
transform: translate(200px);
}旋转 rotate
-
参数只有一个
-
单位deg
-
围绕中心z旋转
-
正数顺时针 ，负数逆时针
div {
width: 100px;
height: 100px;
background: blue;
transition: transform 2s;
}
div:hover {
transform: rotate(20deg);
}
缩放scale
-
一个值代表x与y
-
两个值第一个x 第二个y
-
无单位
-
x正数向左变形 负数向右 y正数向上 负数向下
-
以中心
div {
width: 100px;
height: 100px;
background: blue;
transition: transform 2s;
}
div:hover {
transform: scale(1, 2);
}变形skew
-
一个值代表x与y
-
两个值第一个x 第二个y
-
无单位deg
-
x正数向左变形 负数向右 y正数向上 负数向下
-
以中心
div {
width: 100px;
height: 100px;
background: blue;
transition: transform 2s;
}
div:hover {
transform: skew(20deg, 50deg);
}变化原点 transform-origin 改变原点位置
-
默认是transform-origin:center center
-
原点关键字 top left bottom right center
-
偏移量左上角
-
可以使用px em 百分比
-
只设置一个默认其他cener
变化后的特点
-
不会脱离文档流
-
可以移除屏幕或者遮挡
-
必须是display:block 或者inline-block或者改变父元素display为flex或grid
-
可以设置多个动画样式，从左到右 空格分开
div {
width: 100px;
height: 100px;
background: blue;
transition: transform 2s;
}
div:hover {
transform: skew(20deg, 50deg);
transform-origin: right;
// transform: scale(1, 2) skew(20deg, 50deg);
}3D变换
translate3d
-
x，y，z三个参数必填
-
x 正数向右，负向左
-
y 正数向下，负向下
-
z 正数向屏幕外 ，负向屏幕内
/* 3d变化 */
transform-style: preserve-3d;
/*视角*/
perspective: 1000px;
子元素
transform: translate3d(20px, 10px, 100px);旋转rotate3d rotateX routateY rotate Z
-
transform: rotateX(45deg) – 沿着 x 轴正方向旋转 45 度 transform: rotateY(45deg) – 沿着 y 轴正方向旋转 45 度 transform: rotateZ(45deg) – 沿着 z 轴正方向旋转 45 度 transform: rotate3d(x, y, z, 45deg) – 沿着自定义轴旋转 45 deg 为角度
-
默认可见的 backface-visibility: visible; 不可见 backface-visibility: hidden;
-
旋转位置起点 transform-origin: left;
缩放 scale3d scaleX scaleY scaleZ
动画animation
animation: name duration timing-function delay iteration-count direction;
animation-name 规定需要绑定到选择器的 keyframe 名称。。 animation-duration 规定完成动画所花费的时间，以秒或毫秒计。 animation-timing-function 规定动画的速度曲线。 animation-delay 规定在动画开始之前的延迟。 animation-iteration-count 规定动画应该播放的次数。 animation-direction 规定是否应该轮流反向播放动画。
<style>
div{
width:100px;
height:100px;
background:blue;
position:relative;
animation:mymove 2s infinite;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
</style>
<body>
<div></div>
</body>