本文共 1849 字，大约阅读时间需要 6 分钟。

动画

之前使用过渡遇到的一些问题：

1.需要重复过渡效果时无法实现 2.只能通过hover等方式才能出发。

动画：

1.通过@keyframs定义动画。 2.在指定元素中，通过animation属性来调用动画。

1.定义动画

格式： @keyframes 动画名 { from{ 初始帧 } to{ 结束帧 } } 【注】动画名不要起关键字，最好见名知意。

2.动画的调用：

通过animation属性来调用动画。

@keyframes dong {
   第一种写法       form{
   初始值translate(0px, 0px)}       to{
   结束值translate(50px, 0px)}可以只有结束值第二种写法 0% {
            transform: translate(0px, 0px);                       }100% {
            transform: translate(0px, 0px);         background-color: rgb(0, 25, 252);            }        }

animation-name：

动画名称

animation-name: zhuan;

animation-duration

执行一次动画的完成时间。

animation-duration: 4s;

animation-iteration-count:

动画的执行次数 1 2 3

infinite 表示无数次。

animation-iteration-count:infinite;

animation-delay:

动画延迟执行的时间。

animation-delay: 0s;

animation-fill-mode:填充

animation-fill-mode:none;

forwards：在动画结束后，盒子保持结束帧状态。

backwards 在动画开始时，包含延迟时间，让盒子保持初始帧状态

both backwards forwards都生效

none(默认值)

animation-direction: 动画的执行方式

animation-direction: alternate ;

1. alternate：交替执行。（按照来时的状态完完整整的在回去）

2. normal 正常（默认）

3. reverse 反向 从结束帧开始到初始帧结束。

【注】alternate 反向也会算一次执行时间。

animation-timing-function:linear; 运行速度

• linear 匀速

• ease-in 加速

• ease-out 减速

• ease-in-out 先加速后减速

  注】动画属性要有中间状态，一般是数值

动画调用         animation-name: dong;               一次动画完成时间 */        animation-duration: 4s;               延迟 */        animation-delay: 0s;               执行次数 */        animation-iteration-count:infinite;              动画执行方式 */        animation-direction: alternate ;              填充模式——在动画结束后，盒子保持结束帧状态 */        animation-fill-mode:forwards;                速度 */        animation-timing-function:ease-in-out;

animation-play-state 动画运行状态

• paused:暂停

• running 运行

当鼠标经过的时候停止运动 -  .box:hover{
               animation-play-state: paused ;        }

滤镜

透明度

filter: opacity(25%); 模糊 filter: blur(2px); 阴影 filter: drop-shadow(5px 5px 5px rgb(5, 5, 5)); 亮度 filter: brightness(1);

转载地址：https://blog.csdn.net/z18237613052/article/details/111314138 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！