【日常记录】【CSS】利用动画延迟实现复杂动画

文章目录

- 1、介绍
- 2、原理
- 3、代码
- 4、参考链接

1、介绍

在这里插入图片描述

对于这个效果而言，最先想到的就是 监听滑块的input事件来做一些操作 ,但是会发现，对于某一个节点的时候，这个样式操作起来比较麻烦

在这里插入图片描述

只看这个代码的话，发现他用的是动画，那动画与下面的滑块怎么联动？

2、原理

在css中，可以自定义动画

CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

animation-delay 是控制动画延迟的
正值表示动画应在指定的时间量过去后开始。默认值为 0s，表示动画应立即开始。
负值会导致动画立即开始，但是从动画循环的某个时间点开始。例如，如果你将 -1s 作为动画延迟时间，则动画将立即开始，但是将在动画序列的第 1 秒开始。如果你为动画延迟指定负值，但起始值是隐含的，则起始值取自应用动画到元素的时刻。

在这里插入图片描述

其实，核心就在这里，这样的话就可以通过动画的延迟属性与滑块的input 事件联动，实时设置动画的延迟属性的值

animation-play-state 是控制动画运行还是暂停。

在这里插入图片描述

那其实就是说，我先可以先做好这个自定义动画，并且动画设置暂停，通过脚本来实时控制当前这个动画，延迟多少秒，在那个时间点，开始执行

/* 举个例子，  @keyframes 后面跟的是 动画名称， */@keyframes faceColor {0% {background-color: tomato;}100% {background-color: #3cb371;}}

3、代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input[type=range]::-webkit-slider-thumb {-webkit-appearance: none;}.container {width: 100%;height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;}.face {--delay: 0s;position: relative;width: 150px;height: 150px;border-radius: 50%;background-color: red;animation: faceColor 1s var(--delay) linear forwards paused;}.eye,.eye2 {position: absolute;top: 50px;left: 20px;width: 30px;height: 30px;background-color: #fff;border-radius: 50%;clip-path: polygon(0 90%, 100% 0, 100% 100%, 0% 100%);animation: eye 1s var(--delay) linear forwards paused;}.eye2 {top: 50px;right: 20px;left: unset;clip-path: polygon(0 0, 100% 90%, 100% 100%, 0% 100%);}.range {margin-top: 10px;}@keyframes faceColor {0% {background-color: tomato;}25% {background-color: orange;}50% {background-color: #1e90ff;}75% {background-color: orchid;}100% {background-color: #3cb371;}}@keyframes eye {0% {clip-path: polygon(0 90%, 100% 0, 100% 100%, 0% 100%);}25% {clip-path: polygon(0 70%, 100% 0, 100% 100%, 0% 100%);}50% {clip-path: polygon(0 50%, 100% 0, 100% 100%, 0% 100%);}75% {clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%);}100% {clip-path: polygon(0 0%, 100% 0, 100% 100%, 0% 100%);}}</style>
</head><body><div class="container"><div class="face"><div class="eye"></div><div class="eye2"></div></div><input type="range" name="" id="" max="1" min="0" step="0.01" class="range" value="0"></div><script>let rangeEl = document.querySelector('.range');let faceEl = document.querySelector('.face');faceEl.style.backgroundColor = 'red';rangeEl.addEventListener('input', function (e) {console.log(e);let value = this.value;faceEl.style.setProperty('--delay', '-' + value + 's');})</script>
</body></html>