Powered by md-Blog 文 - 篇 访客 -
CSS3动画transition、animation、transform的使用方法
分类：HTML5+CSS3 /
更新：2020-11-01 17:25:39 / 创建：2020-01-16 14:19:15
1、CSS3 动画包含
- transition
transition: width 1s ease 0s;
后面不要跟 all，占用浏览器资源
- animation
animation: name duration timing-function delay iteration-count direction fill-mode;
有播放次数、播放方向、停止播放状态、是否暂停
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。会开启浏览器渲染GPU加速加持，更流畅。
2、时间函数
动画单位帧内播放的速度曲线
预设值
linear ease ease-in ease-out ease-in-out
cubic-bezier(n,n,n,n) 可以在 Chrome 浏览器中调节
3、动画监听
let runstart = () =>{console.log('runstart')}
let runend = () =>{console.log('runend')}
$loading = addEventListener('animatonstart', runstart);
$loading = addEventListener('animatonend', runend);4、参考 Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
<style>
body{
text-align: center;
}
div{
margin: 30px 500px;
}
.box{
width: 100px;
height: 100px;
}
/* demo 1 */
.demo1{
background: #F60;
transition: width 1s ease 0s;
/* 属性、过渡时间、切换速度时间函数、延迟启动 */
}
.demo1:hover{
width: 500px;
}
/* demo 2 */
.demo2{
background: #F00;
transition: transform 1s ease-out 0s;
/* 属性、过渡时间、切换速度时间函数、延迟启动 */
}
.demo2:hover{
transform: rotate(45deg);
}
/* demo 3 */
.demo3{
background: #2b8fca;
}
.demo3:hover{
/* animation: move 1s linear infinite alternate; */
/* infinite 无限循环，可以为具体的数字 */
animation: move 1s linear 2 alternate forwards;
/* 来回一次 */
}
/* 定义动画名称 */
@keyframes move{
100%{
transform: translateX(100px);
}
}
/* demo 4 */
.demo4{
background: green;
border-radius: 50%;
animation: jump 2s cubic-bezier(0.38, 0, 0.98, 0.29) infinite;
}
@keyframes jump{
0%{
transform: translateY(0px);
}
40%{
transform: translateY(100px);
clip-path: ellipse(50% 50% at 50% 50%);
}
50%{
transform: translateY(100px);
clip-path: ellipse(50% 30% at 50% 30%);
}
100%{
transform: translateY(0px);
}
}
/* demo 5 */
.demo5{
background: #f1c800;
font-size: 100px;
line-height: 83px;
/* animation: round 2s steps(12) infinite; */
animation: round 2s linear infinite;
}
/* demo 6 */
.demo6{
background: #f1c800;
font-size: 100px;
line-height: 83px;
animation: round 2s steps(12) infinite;
}
@keyframes round {
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<hr>
demo1
<div class="box demo1"></div>
<hr>
demo2
<div class="box demo2"></div>
<hr>
demo3
<div class="box demo3"></div>
<hr>
demo4
<div class="box demo4"></div>
<hr>
demo5
<div class="box demo5">+</div>
<hr>
demo6
<div class="box demo6">+</div>
</body>
</html>小站不易，感谢支持！
