css animation动画

程序员文章站 2024-03-25 13:04:16

...

css animation动画

animation为html元素不同style样式的切换过程添加过渡动画

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        .ani {
            width: 100px;
            height: 100px;
            background: #5cffa6;
            animation: 1s ease-in-out .5s infinite alternate forwards running from-left;
        }

        @keyframes from-left {
            0% {
                margin-left: 0;
                background: #5cffa6;
            }
            50% {
                background: #e6ff0b;
            }
            100% {
                margin-left: 400px;
                background: #ff0757;
            }
        }
    </style>
</head>
<body>
<div class="ani"></div>
</body>
</html>

css animation动画

代码分析

css animation动画

animation-duration 单次动画执行所需时间，单位可设置为s或ms
animation-timing-function 动画关键帧的执行节奏，以舒缓的方式开始和结束动画
可设置的值
- ease 缓动
- ease-in 开始时缓动
- ease-out 结束时缓动
- ease-in-out 开始结束时缓动
- linear 线性执行动画
- step-start 直接跳到动画开始时的style样式
- step-end 直接跳到动画结束时的style样式
- cubic-bezier() 使整个动画按照贝塞尔曲线平滑播放，传入四个参数，分别为p1和p2两个点的坐标，
- steps(4, end) 将整个过程分为四段，跳跃执行
animation-delay 动画开始前的延时时间，单位可设置为s或ms
animation-direction 动画执行方向
可设置的值
- normal 正常方向
- reverse 反向
- alternate 正常方向往返
- alternate-reverse 反方向往返
animation-iteration-count 动画的执行此时，infinite表示无限次，可设置为整数
animation-fill-mode 动画执行前后样式的设置方式
可设置的值
- none 动画开始之前不会将keyframes的样式应用于要播放动画的元素
- forwards 元素设置动画播放最后一帧的样式
- backwards 元素在延时时就拥有动画开始时第一帧的样式
- both 同时设置为forwards和backwards
animation-play-state 动画播放状态
可设置的值
- paused 动画处于暂停状态
- running 动画处于正在播放状态
animation-name 关键帧的名称 @keyframes的名称