动画效果--animation

已于 2024-01-22 20:21:02 修改
阅读量3.9k 收藏 33
点赞数 29
文章标签： visual studio html 前端
于 2022-07-13 20:25:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51391923/article/details/125771150
版权

文章目录

                一.动画

                        1.动画的基本使用

                        2.@keyframes  定义动画

                        3.初步使用

                 二  动画常见的基本属性

                              1.常见的一些属性

                               2.复合属性和拆分属性

                                3.动画帧（steps实现逐帧动画）

一动画

         动画( animation)是CSS3icon-default.png?t=N7T8https://so.csdn.net/so/search?q=CSS3&spm=1001.2101.3001.7020中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
相比较过渡，动画可以实现更多变化，更多控制，连续自动插放等效果。 

2.@keyframes  定义动画

        基本的俩种使用的方法

                        第一种：from 起始的时候       to 最后的时候

/* 一. 定义动画：从200变大到600 */
        /* @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        } */

     第二种 ：百分比的状态

/* 二. 定义动画：200 到 500*300 到 800*500 */
        /* 百分比表示的是占用动画时长的百分比 */
        @keyframes change {
            0% {
                width: 200px;
            }
            30% {
                width: 500px;
                height: 300px;
            }
            100% {
                width: 800px;
                height: 500px;
            }
        }

        1.0%是动画的开始，100%是动画的完成 就相当于   from{ }  和  to{  } 相同。

        2.在使用的时候可以根据需求来选择相应的动画。

3 初步使用

         在使用的时候，使用animation添加动画效果，动画名称和动画时长必须赋值。

 <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            animation: change 1s;
        
        }

        /* 一. 定义动画：从200变大到600 */
        /* @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        } */
        

        /* 二. 定义动画：200 到 500*300 到 800*500 */
        /* 百分比表示的是占用动画时长的百分比 */
        @keyframes change {
            0% {
                width: 200px;
            }
            30% {
                width: 500px;
                height: 300px;
            }
            100% {
                width: 800px;
                height: 500px;
            }
        }
        
    </style>

二   动画常见的基本属性

          1.使用animation相关属性控制动画执行过程

          2.常见的动画属性

        3.复合属性

 /* linear 速度曲线: 匀速 */
            animation: change 1s linear;

            /* 第二个时间表示延迟时间 */
            animation: change 1s 2s;

            /* 3:播放次数; infinite: 无限循环 */
            animation: change 1s 3;
            animation: change 1s infinite;

            /* alternate: 反向 */
            animation: change 1s infinite alternate;

            /* 播放完毕时的状态, 删除掉infinite alternate */

            /* backwards: 默认值, 动画停留在开始的状态 */
            animation: change 1s backwards;

            /* forwards: 动画停留在结束的状态 */
            animation: change 1s forwards;

         基本的使用方法：

<!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>animation复合属性</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            
            /* linear 速度曲线: 匀速 */
            animation: change 1s linear;

            /* 第二个时间表示延迟时间 */
            animation: change 1s 2s;

            /* 3:播放次数; infinite: 无限循环 */
            animation: change 1s 3;
            animation: change 1s infinite;

            /* alternate: 反向 */
            animation: change 1s infinite alternate;

            /* 播放完毕时的状态, 删除掉infinite alternate */

            /* backwards: 默认值, 动画停留在开始的状态 */
            animation: change 1s backwards;

            /* forwards: 动画停留在结束的状态 */
            animation: change 1s forwards;
        }

        @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

拆分写法：

<!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>animation拆分写法</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;

            animation-name: change;
            animation-duration: 1s;
            animation-iteration-count: infinite;

            /* animation-play-state: paused; */
            animation-timing-function: steps(3);
            
        }

        .box:hover {
           animation-play-state: paused;
        }


        @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

动画帧（steps实现逐帧动画）        

                 1.动画帧使用的时候要配合精灵图的使用。在写steps的时候一定不能忘记最后的s字母

                 2.animation-timing-function: steps(N)； 将动画过程等分成N份 

                 3.

                        精灵动画制作步骤
                        ➢ 准备显示区域
                        ➢ 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
                        ➢ 定义动画
                        ➢ 改变背景图的位置（移动的距离就是 精灵图的宽度 ）
                        ➢ 使用动画
                        ➢ 添加速度曲线 steps(N) ，N与精灵图上小图 个数相同
                        ➢ 添加无限重复效果 
!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>精灵动画</title>
  <style>
    .box {
      /* 1680/12 */
      /***** 盒子的尺寸和一个精灵小图的尺寸是一样 */
      width: 140px;
      height: 140px;
      /* border: 1px solid #000; */
      background-image: url(./images/bg.png);

      /* steps(12) : 数字和精灵小图的个数是一样的 */
      animation: 
        run 2s steps(12) infinite,
        move 3s forwards
      ;
      /* animation: ; */
    }


    /* 定义动画: 让背景图向左移动 */
    @keyframes run {
      from {
        background-position: 0 0;
      }
      to {
        background-position: -1680px 0;
      }
    }

    /* 定义动画: 位移 */
    @keyframes move {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(600px);
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

始终坚持在保安岗位
关注
  • 29
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
多媒体基础：动画和视频知识笔记
IT技术分享社区
10-08 1197
1、动画和视频的概念动画：将静态的图像、图形等按照一定的时间顺序显示而形成的连续的动态画面。传统意义来说动画是在连续多格的胶片上拍摄的一系列画面，比将胶...
animation动画及3D
karry_yuan的博客
04-11 4136
animation动画及3D
Unity 代码实现Animator开始和结束播放动画回调
最新发布
明明明的博客
05-25 795
Unity 代码实现Animator开始和结束播放动画回调
animation动画库 + animation用法
html标签-meta
09-10 2万+
一. 动画库 1. animation.css https://daneden.github.io/animate.css/ 简单使用时，f12 审查元素 .cls 就可以查找对应的animation。 这个库最简单。 2. hover.css  http://ianlunn.github.io/Hover/ f12审查元素，选中：hover伪类，就可以查看具体animation。 ...
CSS3（三）Animation 入门详解
热门推荐
CSDN前端知识共享
04-17 7万+
Animation 前言 好的前端工程师，会更注重用户的体验和交互。那么动画就是将我们的静态页面，变成具有灵动性，为我们的界面添加个性的一种方式。 下面是七喜的官方主页，它就是很好的富交互样例。鼠标移动到导航栏，就会播放多种动效，给用户一种酷炫的体验。我觉得用户体验，才是前端工程师更加关注的问题，而不是一味追求Javascript的编码技能。 七喜官方网站 A...
css动画里面transition和transform以及animation和和keyframes几个属性的区别，以及语法格式
Jason_from_China的博客
11-24 1719
TRANSTION
CSS动画效果（animation属性）解析
shao_xuan_的博客
10-21 4305
CSS动画效果（animation属性）解析动画与变形和过渡的区别@keyframesanimation-name属性animation-duration属性animation-timing-function属性animation-delay属性animation-iteration-count属性animation-direction属性animation属性基础练习总结 动画与变形和过渡的区别 在CSS3中， 过渡 和 变形 只能设置元素的变换过程，并不能对过程中的某一环节进行精确控制，例如 过渡 和
详解android 中animation-list 动画的应用
08-28
Android 中 animation-list 动画是一种常见的动画效果，通过使用 AnimationDrawable 来实现动画的播放。今天，我们将详细介绍 animation-list 动画在 Android 中的应用。 首先，让我们来了解 animation-list 动画的...
利用css3-animation实现逐帧动画效果
09-24
本文将深入探讨如何利用 `css3-animation` 实现逐帧动画效果，这对于创建动态图形、游戏元素或复杂的视觉效果非常有用。 首先，我们需要了解 CSS3 的 `@keyframes` 规则，它是创建动画的核心。`@keyframes` 允许...
CSS实现动画效果-角色立绘
08-22
在这个“CSS实现动画效果-角色立绘”的主题中，我们将深入探讨如何利用CSS来创建富有表现力的角色立绘动画。 首先，我们需要理解CSS动画的基础：关键帧（Keyframes）。关键帧是动画过程中的特定时间点，定义了元素...
Java代码-Android-动画效果-综合文档
05-20
在Android开发中，Java代码是实现各种功能的核心，包括丰富的动画效果。动画是提升用户体验、增加应用程序吸引力的重要手段。本文将深入探讨如何使用Java代码在Android平台上创建和应用动画效果。 一、Android动画...
webpage-animation:网页动画与三维网页设计课程作业
03-07
webpage-animation:网页动画与三维网页设计课程作业
微信小程序animation循环动画效果--让云朵飘
03-29
微信小程序提供了实现动画的api——animation，但却不能循环播放，都是一次性的，动完就Over了，下面提供一个用微信小程序的animation来实现循环动画的玩具，抛砖引玉，希望大家能想出更好的方法来实现真正的循环。...
css动画animation详细解读
宋坚强大大~~
10-22 4584
以一个小球为例 向右匀速运动200px 然后再移动回来，然后再移动到200px处 停在那里 效果如下 div{ width:40px; height:40px; border-radius:50%; background:#0ff; animation:move 2s linear 3 alternate both; } @keyframes ...
animation动画复合属性
学习笔记
06-19 1365
css3中的animation动画复合属性：name(绑定的动画名称) duration(完成时间) timing-function(如何完成一个周期) delay(启动前间隔) iteration-count(播放次数) direction(是否反向) fill-mode(不播放时的样式) play-state(运行或暂停) ...
CSS的动画特效（animation）
githubcurry
12-09 1万+
今天来讲一下css中很实用的一个效果-动画（animation）。 动画就是使元素从一种样式逐渐变化为另一种样式的效果。我们可以改变任意多的样式任意多的次数（很官方的回答）。 为了方便大家和我自己理解这个概念，我们可以想像一下准备拍电影的时候，我们需要一个电影名吧，需要设置电影的时间吧。而且拍电影就是一帧一帧，叫做关键帧。所以我们设置动画的时候要讲清楚电影名（animation-name），电影时长（animation-duration），电影啥时候开始（animation-delay），播放或者暂停（a.
css3动画属性animation
过客如期的博客
09-12 2127
css3 animation动画属性 一，浏览器支持情况 IE Firefox Chrome Safari Opera Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。 Safari 和 Chrome 支持替代的 -webkit-animation 属性。 注释：Internet Explorer 9 以及......
Duilib真彩色序列帧动画。
tanpan004的专栏
03-06 1772
duilib库是可以支持在异形窗口下gif动画的，但是gif动画只有256色，目前项目中需要一个能够播放高清动画的游戏启动器，但真彩色的视频转成gif后失色严重，便想办法写了一个逐帧渲染png图片的类（其实是拿CGifAnimUI类改的），这个类支持webp格式，需要用的到google 的webp库，是所以用它是因为启动器的大小需求，120帧的png图片，一张1.2M左右，一起就是150M,经过we
动画效果Animation
shunzi5201314a的专栏
07-24 130
duilib中动画效果实现
介绍CSS3动画常用属性的视频脚本，包含animation-duration、animation-name animation-delay animation-iteration-count animation-direction字数1000字左右
06-02
非常感谢您的提问，以下是关于CSS3动画常用属性的视频脚本，其中包括animation-duration、animation-name、animation-delay、animation-iteration-count和animation-direction的详细介绍。 CSS3动画是为了能够在网页中实现更加生动、有趣的动态效果而被广泛使用的技术。它可以让我们通过代码来控制元素的动态变化，包括移动、缩放、旋转、淡入淡出等效果。要实现这些动态效果，我们需要使用一些CSS3动画的常用属性。 1. animation-duration属性 animation-duration属性指定动画的持续时间，它可以被定义为一个时间值，例如1s、2s、3s等。在CSS3动画中，我们可以使用animation-duration属性来控制动画的播放时间，从而实现不同的效果。 例如，我们可以通过设置animation-duration属性来控制一个元素在1秒内淡出： ```css .fade-out { animation-name: fade-out; animation-duration: 1s; } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } ``` 2. animation-name属性 animation-name属性指定动画的名称，它可以被定义为一个自定义的名称，例如fade-out、slide-in等。在CSS3动画中，我们可以使用animation-name属性来指定元素应用哪种动画效果。 例如，我们可以通过设置animation-name属性为fade-out来让元素应用一个淡出的动画效果： ```css .fade-out { animation-name: fade-out; animation-duration: 1s; } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } ``` 3. animation-delay属性 animation-delay属性指定动画的延迟时间，它可以被定义为一个时间值，例如1s、2s、3s等。在CSS3动画中，我们可以使用animation-delay属性来控制动画的开始时间，从而实现不同的效果。 例如，我们可以通过设置animation-delay属性为2秒来让元素在2秒后开始淡出： ```css .fade-out { animation-name: fade-out; animation-duration: 1s; animation-delay: 2s; } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } ``` 4. animation-iteration-count属性 animation-iteration-count属性指定动画的重复次数，它可以被定义为一个数字值或者关键字，例如1、2、infinite等。在CSS3动画中，我们可以使用animation-iteration-count属性来控制动画的重复次数，从而实现不同的效果。 例如，我们可以通过设置animation-iteration-count属性为2来让元素的淡出动画只重复2次： ```css .fade-out { animation-name: fade-out; animation-duration: 1s; animation-iteration-count: 2; } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } ``` 5. animation-direction属性 animation-direction属性指定动画的播放方向，它可以被定义为一个关键字，例如normal、reverse、alternate等。在CSS3动画中，我们可以使用animation-direction属性来控制动画的播放方向，从而实现不同的效果。 例如，我们可以通过设置animation-direction属性为alternate来让元素的淡出动画来回播放： ```css .fade-out { animation-name: fade-out; animation-duration: 1s; animation-direction: alternate; } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } ``` 总的来说，animation-duration、animation-name、animation-delay、animation-iteration-count和animation-direction是CSS3动画中非常重要的属性，它们可以让我们精确控制动画的播放时间、动画的名称、动画的延迟时间、动画的重复次数以及动画的播放方向，从而实现各种不同的动态效果。希望这个视频脚本能够帮助您更好地理解这些属性的使用方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值