前端开发 CSS之帧动画
帧动画介绍
帧动画的实现格式
目标元素 {
animation-name:帧动画名称。（注：必写）
animation-duration: 帧动画完成时间;（注：必写）
}
@keyframes 帧动画名称（注：不要与关键子冲突）
{
// from 表示起始点
// to表示终点
// 使用百分比也可以
// 混用也可以
}
帧动画属性
animation-name：帧动画的名称
animation-duration：帧动画的执行时间
main{
// 两个动画具有相同属性 ， 后面的动画权重更大
animation-name: scale, colors, rotate;
// 1 scale 执行 1s colors 执行 5s rotate 执行 1s
animation-duration: 1s, 5s, 1s;
// 2 scale 执行 5s colors 执行 1s rotate 执行 5s
// 第 3 个动画未设置时间，为第一个时间
animation-duration: 5s, 1s;
}
animation-iteration-count：帧动画执行的次数 infinite 为无限次
animation-direction：帧动画运行的方向
normal 从0%到100%运行动画
reverse 从100%到0%运行动画
alternate 先从0%到100%，然后从100%到0%
alternate-reverse 先从100%到0%，然后从0%到100%
animation-delay：帧动画等待多长时间后执行
animation-timing-function：帧动画的速率
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 开始慢，然后快，慢下来，结束时非常慢（cubic-bezier(0.25,0.1,0.25,1)）
ease-in 开始慢，结束快（等于 cubic-bezier(0.42,0,1,1)）
ease-out 开始快，结束慢（等于 cubic-bezier(0,0,0.58,1)）
ease-in-out 中间快，两边慢（等于 cubic-bezier(0.42,0,0.58,1)）
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值，可在 https://cubic-bezier.com (opens new window)网站在线体验效果
steps(n,start) 设置n个时间点，第一时间点初始状态
steps(n,end) 设置n个时间点，第一时间点结束状态
step-start 等于steps(1,start)，可以理解为从下一步开始
step-end 等于steps(1,end)，可以理解为从当前步开始
animation-play-state：帧动画的暂停与运行
paused 暂停
running 运行
animation-fill-mode：帧动画的最后一帧状态
none 需要等延迟结束，起始帧属性才应用
backwards 动画效果在起始帧，不等延迟结束
forwards 结束后停留动画的最后一帧
both 包含backwards与forwards规则，即动画效果在起始帧，不等延迟结束，并且在结束后停止在最后一帧
案例
代码
<!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>
* {
margin: 0;
padding: 0;
}
main {
width: 100vw;
height: 100vh;
background-color: #057D9F;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
main .show {
text-align: center;
width: 320px;
height: 40px;
line-height: 40px;
font-size: 12px;
color: #AE9F9F;
margin: 10px 0;
opacity: 0;
animation-name: show;
animation-duration: 3s;
animation-timing-function: linear;
}
main .my {
text-align: center;
width: 320px;
height: 40px;
line-height: 40px;
font-size: 12px;
color: #FF0000;
margin: 2px 0;
opacity: 0;
animation-name: show;
animation-duration: 2s;
animation-delay: 3s;
animation-timing-function: linear;
}
@keyframes show {
50% {
font-size: 15px;
opacity: .4;
}
100% {
font-size: 18px;
opacity: .8;
}
}
main .heart {
width: 100px;
height: 100px;
margin-top: 50px;
background-color: #F10026;
position: relative;
transform: rotate(45deg) scale(1);
animation-name: jump;
animation-duration: 4s;
animation-delay: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
}
main .heart::before {
content: '';
position: absolute;
width: 100px;
height: 100px;
background-color: #F10026;
border-radius: 50%;
transform: translateX(-50px);
}
main .heart::after {
content: '';
position: absolute;
width: 100px;
height: 100px;
background-color: #F10026;
border-radius: 50%;
transform: translateY(-50px);
}
@keyframes jump {
50% {
transform: rotate(45deg) scale(1.5);
animation-timing-function: ease-out;
}
}
main .love {
text-align: center;
width: 320px;
height: 40px;
line-height: 46px;
font-size: 16px;
color: #e71515;
margin-top: 40px;
opacity: 0;
animation-name: show;
animation-duration: 4s;
animation-delay: 5s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
</style>
</head>
<body>
<main>
<div class="show">
<p>没遇见你之前我的心一直很平静</p>
</div>
<div class="my">
<p>在看到你的第一眼后，我的心</p>
</div>
<div class="heart">
</div>
<div class="love">
<p>l love you</p>
</div>
</main>
</body>
</html>
源码
Github：Github：https://github.com/hrbust1914010305/css