好处是, transform 制作的动画会直接进入合成阶段,避开重排重绘,可以通过 Performance 录制面板来查看 transform 动画的效率。
MDN animation
深入浅出CSS动画
MDN animate()
监听 CSS animation 动画的事件:
这些监听事件对 animate() 是无效的。
页面顶部经常会见到水平无限轮播的公告。
由于轮播的内容是动态的,可能很多,也可能很少,如果公告内容的宽度没有超过最大宽度限制,那么就不应该轮播,如果超过了,则发起轮播。
假设我们永远只有一条最新的公告
原理:当一次动画执行结束时,影子内容的头部刚好对准轮播内容的初始位置,那么下次动画开始时,轮播内容将重新回到初始位置,由于影子内容与轮播内容相同,那么就给人造成一种无限轮播的错觉。
逻辑实现:父元素设置了 overflow: hidden ,又想要获取父元素、子元素的真实宽度,那么可以通过 scrollWidth 获取。
兼容性:如果不支持 animate() ,那么我们可以动态创建 <style>+ @keyframes ,插入 <head>, 但也要记得移除。
您可以使用 CSS 动画来实现门打开后展示灯笼自上而下的动画效果。具体步骤如下:
1. 在 HTML 中创建门和灯笼的元素,并给这些元素添加类名。例如:
<div class="door">门</div>
<div class="lantern">灯笼</div>
2. 在 CSS 中为门添加打开的样式。例如,可以使用 transform 属性来旋转门:
.door {
transform: rotate(90deg)
}
3. 为灯笼添加动画样式。可以使用 CSS 的 animation 属性来实现动画效果。例如,可以使用以下样式来使灯笼从上方移动到下方:
.lantern {
animation: moveDown 1s ease-in-out
}
@keyframes moveDown {
from {
top: -100px
}
to {
top: 100px
}
}
4. 使用 JavaScript 来控制动画的播放。可以在门打开后调用灯笼元素的 classList.add 方法,来添加动画类名,从而触发动画的播放。
例如:
document.querySelector('.door').addEventListener('click', function() {
document.querySelector('.lantern').classList.add('lantern-animation')
})
希望这些信息能帮助到您!
《GitHub精选》是我们分享Github中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个使用纯CSS实现动画加载效果的项目——SpinKit。
SpinKit通过使用transform和opacity属性实现了包括方块翻转、圆点旋转、圆环缩放和九宫格渐变等10余种动画加载的效果。
部分效果代码:
其他效果:
GitHub: https://github.com/tobiasahlin/SpinKit