当前位置: 首页 > article >正文

跟着pink老师前端入门教程-day17

2、CSS3 动画

动画(animation)是CSS3中就要有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果

相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果

2.1 动画的基本使用

制作动画分为两步

1. 先定义动画

2. 再使用(调用)动画

1.1 用keyframes定义动画(类似定义类选择器)
@keyframes 动画名称 {
        0%{
                width:100px;
        }
        100%{
                width:200px;
        }
}
1.2 元素调用动画
div {
        width: 200px;
        height: 200px;
        background-color: aqua;
        margin: 100px auto;
        /* 调用动画 */
        animation-name: 动画名称 ;
        /* 持续时间 */
        animation-duration: 持续时间 ;
}
    <title>用keyframes 定义动画</title>
    <style>
        /* 想页面一打开,一个盒子就从左边走到右边 */
        /* 1. 定义动画 */
        @keyframes move {

            /* 开始状态 */
            0% {
                transform: translateX(px);
            }

            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }

        div {
            width: 200px;
            height: 200px;
            background-color: saddlebrown;
            /* 2.调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }
    </style>
</head>

<body>
    <div></div>
</body>

动画序列

0% 是动画的开始,100% 是动画的完成。这样的规则就是动画序列。

@keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数

请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 100%

    <style>
        /* from 和 to 等价于0% 和100%  */
        @keyframes move {
            from {
                transform: translate(0, 0);
            }

            to {
                transform: translate(1000px, 0);
            }
        }

        div {
            width: 100px;
            height: 100px;
            background-color: salmon;
        }
    </style>
</head>

<body>
    <div></div>
</body>

HTML

    <title>动画序列</title>
    <style>
        /* 1、可以做多个状态的变化,keyframe关键词 */
        /* 里面的百分比不能是整数 */
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }

            25% {
                transform: translate(1000px, 0);
            }

            50% {
                transform: translate(1000px, 500px);
            }

            75% {
                transform: translate(0, 500px);
            }

            100% {
                transform: translate(0, 0);
            }
        }

        div {
            width: 100px;
            height: 100px;
            background-color: salmon;
            animation: move;
            animation-duration: 10s;
        }
    </style>
</head>

<body>
    <div></div>
</body>

效果图

2.2 动画常用属性

    <title>动画常用属性</title>
    <style>
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }

            100% {
                /* 2.5s时走在这里 */
                transform: translate(1000px, 0);
            }
        }

        div {
            width: 200px;
            height: 200px;
            background-color: sandybrown;
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
            /* 运动曲线 */
            animation-timing-function: ease-in;
            /* 何时开始 */
            animation-delay: 0s;
            /* 重复次数:infinite无限 */
            /* animation-iteration-count: infinite; */
            /* 是否反方向播放,默认normal alternate:反方向*/
            /* animation-direction: alternate; */
            /* 动画结束后状态 默认的是backwards 回到起始状态 可以让他停在结束状态-forward */
            animation-fill-mode: forwards;
        }
        /* 鼠标经过div 让div停止动画,鼠标离开后就继续动画 */
        div:hover {
            /* 规定动画是否正在运行或暂停。默认是"running",还有"paused" */
            animation-play-state: paused;
        }
    </style>
</head>

<body>
    <div></div>
</body>

2.3 动画简写属性

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

简写属性里面不包含 animation-play-state

暂停动画:animation-play-state: puased; 经常和鼠标经过等其他配合使用

想要动画走回来 ,而不是直接跳回来:animation-direction : alternate

盒子动画结束后,停在结束位置: animation-fill-mode : forwards

    <title>动画简写属性</title>
    <style>
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }

            100% {
                /* 2.5s时走在这里 */
                transform: translate(1000px, 0);
            }
        }

        /* animation:动画名称 持续时间 运动曲线 
                      何时开始 播放次数 是否反方向 
                      动画起始或者结束的状态; */
        div {
            width: 200px;
            height: 200px;
            background-color: sandybrown;
            /* linear匀速 */
            /* animation: move 2s linear 0s 1 alternate forwards; */
            /* 前两个属性 name duration 必写 */
        }
    </style>
</head>

<body>
    <div></div>
</body>

2.4 速度曲线细节

animation-timing-function:规定动画的速度曲线,默认是“ease

    <title>速度曲线细节</title>
    <style>
        div {
            /* 打字机 */
            font-size: 20px;
            width: 0;
            height: 30px;
            overflow: hidden;
            /* 让文字强制一行显示 */
            white-space: nowrap;
            background-color: saddlebrown;
            /* steps 就是分几步来完成动画,有了steps 就不用写ease或者linear */
            animation: w 4s steps(10) forwards;
        }

        @keyframes w {
            0% {
                width: 0;
            }

            100% {
                width: 200px;
            }
        }
    </style>
</head>

<body>
    <div>你好呀,我最好的朋友</div>
</body>
原文地址:https://blog.csdn.net/zyx210603/article/details/135980390
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.kler.cn/a/229417.html

相关文章:

  • 华为数据之道-读书笔记
  • 全面了解 Web3 AIGC 和 AI Agent 的创新先锋 MelodAI
  • StarRocks常用命令
  • http和https分别是什么?区别是什么?
  • 智能门锁开发系列:从设计到实现的全面解析
  • LabVIEW项目中的工控机与普通电脑选择
  • linker list
  • 计组学习笔记2024/2/5
  • 线上编程答疑解惑回顾,初学编程中文编程在线屏幕共享演示
  • 深度学习本科课程 实验1 Pytorch基本操作
  • Linux笔记之bash脚本中的$符号
  • SpringBoot 拦截器Intercepto的创建与基本使用
  • 【C语言不能不会的操作】调试-万字详解【windows操作系统下】(会写bug还会调试解决bug的程序员简直帅呆了,赶紧点赞收藏)
  • 【ESP32+Python】WIFI连接包括固定账号密码+选择WIFI在输入密码
  • 开源机器人ros 基本概念详细介绍
  • C++之程序内存分配方式
  • springboot(ssm考试信息报名系统 在线考试报名系统Java系统
  • 如何从dockerhub 中运行一个简单项目
  • 二分查找------蓝桥杯
  • 配置Jenkins自动构建打包项目
  • Fink CDC数据同步(六)数据入湖Hudi
  • 新零售的升维体验,摸索华为云GaussDB如何实现数据赋能
  • 使用zip4j解压zip时文件名乱码解决最好的方案
  • c语言实现greedy snake(贪吃蛇)
  • 搭建游戏应该选择什么样的服务器?
  • JavaScript运行机制