【animation的用法】

最新推荐文章于 2024-05-06 19:28:55 发布

strawberry tree

最新推荐文章于 2024-05-06 19:28:55 发布

阅读量2.4k

点赞数 1

分类专栏：笔记文章标签：动画 css html

本文链接：https://blog.csdn.net/water7_melon7/article/details/124482319

版权

作用
- 增加用户体验
- 但是不要过度使用
关键帧
- keyframes
动画
- animation–name
  - 动画属性名
- animation–duration
  - 动画持续时间
- animation–delay
  - 动画延迟时间
- animation–timing–function
  - 动画速度曲线
- animation–iteration–count
  - 定义循环次数
  - infinite为无限循环
- animation–direction：alternate
  - 动画轮流反向播放
- animation–play–state
  - 动画状态
  - 值
    - paused
    - running
- animation–fill–mode
  - forwards保留最后一帧动画
第三方动画库
- eg
  - animate.css
- 现在第三方类库可以帮助我们快速实现一些复杂动画

样例一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吃豆人</title>
    <style>

        /* 定义动画 */
        @keyframes bean_roll1{
            /* from{transform: rotate(0);}
            to{transform: rotate(45deg);} */
            0% {transform: rotate(0);}
            50% {transform: rotate(45deg);}
            100% {transform: rotate(0);}
        }
        @keyframes bean_roll2{
            /* from{transform: rotate(0);}
            to{transform: rotate(-45deg);} */
            0% {transform: rotate(0);}
            50% {transform: rotate(-45deg);}
            100% {transform: rotate(0);}
        }
        @keyframes dou_move{
            0% {left:200px;opacity: 1;}
            
            50% {left: 80px;opacity: 1;}

            50.1% {left: 80px;opacity: 0;}

            100% {left: 80px;opacity: 0;}
        }
        .bean{
            width: 200px;
            height: 200px;
            background-color: #222;
            position: relative;
        }
        .bean .cdr{
            width: 0;
            height: 0;
            border: 50px solid gold;
            border-right-color:transparent ;
            border-radius: 50%;
            position: absolute;
            left: 30px;
            top: 50px;
        }
        .cdr:nth-of-type(1){
            /* animation:动画名称 动画执行时间【延迟时间  infinite(无数次)*/
            animation: bean_roll1 2s linear infinite /*alternate*/;
        }
        .cdr:nth-of-type(2){
            /* animation:动画名称 动画执行时间【延迟时间  infinite(无数次)*/
            animation: bean_roll2 2s linear infinite /*alternate*/;
        }
        .eye{
            width: 16px;

最低0.47元/天解锁文章

strawberry tree

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
【animation的用法】

作用增加用户体验但是不要过度使用关键帧 keyframes 动画 animation–name 动画属性名 animation–duration 动画持续时间 animation–delay 动画延迟时间 animation–timing–function 动画速度曲线 animation–iteration–count 定义循环次数 infinite为无限循环 animation–di..
复制链接

扫一扫