在 CSS 中,过渡属性:transition, t元素从一种样式逐渐改变为另一种的效果,支持可识别中间值的属性 (如大小、颜色、位置、透明度等),而如 display 属性则不支持。transform:平移,旋转,倾角等
一、css过渡四要素
1、所过渡的元素必须有css样式
语法:transition: name | duration | timing function | delay;
- transition-property:规定应用过渡的 CSS 属性的名称。
- transition-duration:过渡所用的时时间。
- transition-timing-function:过渡元素的时间曲线,属性值有linear(匀速的过程)、ease(逐渐变慢的过程)、ease-in(加速的过程)、ease-out(减速的过程)、cubic-bezier(0,0,0,0)贝塞尔曲线。
- transition-delay:指定一个过渡的开始时间(即多长时间后开始执行),默认是0。
2、CSS中过渡动画类型可分为四类
1、颜色过渡动画(color)
2、尺寸过渡动画(size)
3、形状过渡动画(shape)
4、位置过渡动画(position)
二、transform变形(2D、3D)
对元素进行移动、缩放、转动、拉长或拉伸。属性值有:translate(平移)、rotate(旋转)、scale(缩放)、skew(扭曲)、perspective(3D透视视图)
1、平移:translate()
- 元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数
2、旋转:rotate()
- 元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。
3、缩放:scale()
元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数
三、animation(动画)
语法:animation: name duration timing-function delay iteration-count direction;
- name(需要绑定到选择器的 keyframe 名称)
- duration(完成动画所花费的时间,以秒或毫秒计)
- function(动画的速度曲线)
- delay(动画开始之前的延迟)
- count(动画应该播放的次数)
- direction(是否应该轮流反向播放动画)
二、简单例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 过渡</title>
<style>
body{
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
* {
margin: 0;
padding: 0;
}
.box {
height: 200px;
width: 200px;
border: 1px solid #000;
transition: all 0.3s linear 0s; /*一般用 all 代替所有要过渡的属性名称*/
-webkit-transform: all 0.3s linear 0s; /* 兼容Safari and Chrome */;
-ms-transition: all 0.3s linear 0s; /*兼容IE10+*/
-moz-transform: all 0.3s linear 0s; /*兼容 Firefox */
-o-transition: all 0.3s linear 0s; /* 兼容Opera */
}
.box:hover {
width: 300px;
height: 300px;
box-shadow: 0px 0px 5px orange;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>