文章目录
- CSS animation-timeline动画时间线
- 概述
- 语法
- 使用
CSS animation-timeline动画时间线
概述
CSS animation-timeline 将动画进度与特定事件（股东你、视口可见性）绑定。
语法
animation-timeline: 驱动方式;
- scroll()：动画进度与页面或容器的滚动位置关联。
- view()：动画进度与元素进入、离开视口的可见性关联。
使用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>animation-timeline</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}.navbar {position: fixed;top: 0;left: 0;width: 100%;height: 100px;background-color: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}.navbar .scrollbar {width: 0%;height: 3px;background: linear-gradient(90deg, #96f, #bf70ff, #e67aff, #ff89dc, #ffa176, #ffb90f);animation: anim 2s linear forwards;animation-timeline: scroll();}.content {width: 100%;height: 1500px;padding-top: 100px;}@keyframes anim {from {width: 0;}to {width: 100%;}}</style></head><body><div class="navbar"><div class="scrollbar"></div></div><div class="content"><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p><p>这是一些文字</p></div></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>animation-timeline 视图时间线</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}body {height: 3000px;}.box {position: sticky;top: 50px;width: 1000px;height: 500px;margin: 800px auto 0;}.box p {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 30px;}.box img {position: absolute;opacity: 0.2;animation: anim 1s linear forwards;animation-timeline: view();}.box .pic1 {top: 0;left: 0;width: 200px;}.box .pic2 {right: 0;bottom: 0;width: 200px;}@keyframes anim {from {transform: scale(1);opacity: 0.2;}to {transform: scale(1.5);opacity: 1;}}</style></head><body><div class="box"><p>hello world</p><img class="pic1" src="../../../assets/images/0.jpg" alt=""><img class="pic2" src="../../../assets/images/pic1.png" alt=""></div></body></html>