简介: 动画真正需要学习的地方在于如何分解动画的变化节点,也就是创建我们 @keyframes 中的变化节点,从而去产生我们需要的动画效果
文章均为个人原创, 搬运请附上原文地址感谢, 原文来自MasterYi博客
@keyframes
该属性表示创建一个动画, 决定动画的执行过程会产生哪些样式变化
animation
绑定一个动画, 规定动画的执行时间、次数、动画曲线、延时执行
其实动画需要记得属性很少,也无需死记, 动画真正需要学习的地方在于如何分解动画的变化节点,也就是创建我们 @keyframes 中的变化节点,从而去产生我们需要的动画效果
属性 | 描述 |
---|---|
animation | 所有动画属性的简写属性 |
animation-name | @keyframes 动画的名称 |
animation-duration | 定义过渡效果花费的时间。默认是 0 单位可以 s 或 ms |
animation-timing-function | 规定动画过渡效果的时间曲线。默认是 "ease" |
animation-fill-mode | 规定动画完成播放后会停留在哪里, 无限播放时无效 |
animation-delay | 规定动画何时开始。默认是 0。 |
animation-iteration-count | 规定动画被播放的次数。默认是 1。 infinite 代表无限播放 |
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 |
animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 |
值 | 描述 |
---|---|
linear | 规定以相同速度开始至结束的过渡效果 |
ease | 规定慢速开始,然后变快,然后慢速结束的过渡效果 |
ease-in | 规定以慢速开始的过渡效果 |
ease-out | 规定以慢速结束的过渡效果 |
ease-in-out | 规定以慢速开始和结束的过渡效果 |
cubic-bezier(n,n,n,n) | 贝塞尔曲线, 自定义自己的值。可能的值是 0 至 1 之间的数值。 |
<style>
.box { display: flex; }
.box div{ width: 100px; height: 50px; background: black; color: white; position: relative; animation: drop 5s 1 forwards 2s; margin: 5px; text-align: center; line-height: 50px; }
.box div:nth-child(1){ animation-timing-function: linear; }
.box div:nth-child(2){ animation-timing-function: ease; }
.box div:nth-child(3){ animation-timing-function: ease-in; }
.box div:nth-child(4){ animation-timing-function: ease-out; }
.box div:nth-child(5){ animation-timing-function: ease-in-out; }
@keyframes drop {
from { top: 0; }
to { top: 300px; }
}
</style>
<body>
<div class="box">
<div>linear</div>
<div>ease</div>
<div>ease-in</div>
<div>ease-out</div>
<div>ease-in-out</div>
</div>
</body>
<style>
.box { display: flex; }
.box div{ width: 100px; height: 50px; background: black; color: white; position: relative; animation:drop 3s 1; animation-delay: 2s; margin: 5px; text-align: center; line-height: 50px; }
.box div:nth-child(1){ animation-fill-mode: forwards; }
.box div:nth-child(2){ animation-fill-mode: backwards; }
.box div:nth-child(3){ animation-fill-mode: both; }
@keyframes drop {
from{ top: 100px; background: red; }
to{ top: 300px; background: #1e9fff; }
}
</style>
<body>
<div class="box">
<div>forwards</div>
<div>backwards</div>
<div>both</div>
<div>none</div>
</div>
</body>
<style>
.box div{ width: 150px; height: 150px; line-height: 150px; margin: 5px; text-align: center; background: black; color: white; position: relative; animation:move 1.5s; }
.box div:nth-child(1){ animation-iteration-count: infinite; }
.box div:nth-child(2){ animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes move {
from{ left: 0; }
to{ left: 300px; border-radius: 50%; }
}
</style>
<body>
<div class="box">
<div>infinite</div>
<div>infinite + alternate</div>
</div>
</body>
了解上述的属性 ,animation动画属性也了解的差不多了,其余属性基本上都是数值型的不需要解释,我们做动画的方法就是分解动画帧, 编写@keyframes的过程
<style>
body { padding: 50px; }
.ball{ width: 100px; height: 100px; background: #1e9fff; border-radius: 50%; position: relative; animation: bounce 2.1s ease-in-out; animation-delay: 2s; animation-fill-mode: forwards; z-index: 1; }
@keyframes bounce {
0% { top: 0; }
40% { top: 300px; }
50% { top: 130px; }
60% { top: 300px; }
68% { top: 190px; }
76% { top: 300px; }
82% { top: 240px; }
88% { top: 300px; }
96% { top: 280px; }
100% { top: 300px;}
}
.shaow { width: 100px; height: 20px; background: #ccc;border-radius: 50%; position: relative; top: 290px; animation: shaow 2.1s ease-in-out; animation-delay: 2s; animation-fill-mode: both; }
@keyframes shaow {
0% { transform: scale(0.2); opacity: 0.1; }
40% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.4); opacity: 0.4; }
60% { transform: scale(1); opacity: 1; }
68% { transform: scale(0.6); opacity: 0.6;}
76% { transform: scale(1); opacity: 1; }
82% { transform: scale(0.8); opacity: 0.8; }
88% { transform: scale(1); opacity: 1; }
96% { transform: scale(0.92); opacity: 0.92; }
100% { transform: scale(1); opacity: 1; }
}
</style>
<body>
<div class="ball"></div>
<div class="shaow"></div>
</body>