目录
动画效果的实现:短时间内连续播放多张静态的帧(静态的图形),并且每一帧图像内部物体的状态(形状,大小,角度,位置,颜色等)必须要发生变化。
触发式动画
<!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>触发式动画</title>
<style>
div{
width: 80px;
height: 80px;
background-color: rgb(0, 255, 34);
margin: 40px 30px;
text-align: center;
color: crimson;
font-size: 10px;
}
.s1{
transform: rotate(45deg); /* 旋转,括号里面指定旋转的角度,单位是deg */
}
.s2{
transform: scale(0.5); /* 等比例缩放,括号里面指定缩放的倍数,倍数要大于0,0——1之间为缩小,大于1为放大 */
}
.s3{
transform: translateX(100px) translateY(30PX); /* 位移 */
}
.s4:hover{
transform: scale(1.5) rotate(45deg) translateX(50px) translateY(50px); /* 复合样式写法 */
transition: 2s; /* 设置过渡时间 */
}
</style>
</head>
<body>
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
<div class="s4"><p>复合样式写法</p></div>
</body>
</html>
常用触发动作
1、鼠标悬浮(:hover)
2、选项选中(:checked)
3、输入框点击(:active)
注:元素默认的状态赋予动画的第一帧,触发动作赋予元素动画的最后一帧
触发式动画之动画参数
过渡动画时间(transition-duration):定义一个动画从第一帧到最后一帧的动画时间,浏览器会根据该时间生成对应数量的中间帧数,帧数=时间(秒)*60帧/秒
过渡动画延迟(transition-delay):定义动画从触发动作执行的一瞬间,延迟多长时间开始展示动画,默认延迟为0,即动作一执行立马就展示动画
过渡动画时间函数( transition-timing-function):定义动画从第一帧到最后一帧变化过程的速率变化,参数见贝塞尔曲线。
过渡动画属性( transition- property):定义元素是以某个属性的变