网页中的一些动画效果的学习笔记

最新推荐文章于 2024-09-14 08:09:14 发布

@little杰

最新推荐文章于 2024-09-14 08:09:14 发布

阅读量152

点赞数

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/m0_50553633/article/details/127157810

版权

网

页中的一些动画效果的学习笔记

一、过渡
**过渡（transition）**通过过渡可以指定一个属性发生变化时的切换方式通过过渡可以创建一些非常好的效果，提升用户的体验
transition-property: ; 指定要执行过渡的属性，多个属性间使用，隔开，如果所有属性都需要过渡则需要使用all关键字，大部分属性都支持过渡效果，注意过度时必须是从一个有效数值向另一个有效数值进行过渡
比如： transition-property: height，width;
transition-property: all;

transition-duration: ; 指定过渡效果的持续时间
比如：transition-duration: 2s;

transition-timing-function: ; 过渡的时序函数，指定过渡的执行方式
可选值：

ease：默认值，慢速开始先加速再减速
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速后减速
cubic-bezier() 来指定时序函数（https://cubic-bezier.com）
steps() 分步执行过渡效果：end每步时间结束的时候执行过渡（默认值），start每步时间开始的时候执行过渡

transition-delay: ;过渡效果的延迟
等待相应的时间以后再执行过渡
比如：transition-delay: 2s;
简写属性：
transition: ;
可以同时设置过渡相关的属性，只有一个要求，如果要写延迟，则两个时间第一个是持续时间，第二个是延迟时间
二、动画
动画和过渡类似，都是可以实现一些动态效果，不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发效果，设置动画效果，必须要设置一个关键帧，关键帧设置了动画执行的每一个步骤
最主要的是要设置关键帧

@keyframes test {
            /* from表示动画开始的位置，也可以使用0% */
            from{
                margin-left: 0;
                background-color:red;

            }
            /* to动画的结束位置 也可以使用100% */
            to{
                margin-left: 700px;
                background-color: orange;

            }
        }

animation-name: ; 要对当前元素生效的关键帧的名字
animation-duration: 0 s; 动画执行的时间
animation-delay: 0ms;动画的延时
animation-timing-function: ease-in-out;
animation-iteration-count: 2;动画执行的次数（infinite无限执行）
nimation-direction: normal; 指定动画运行的方向