animation动画

已于 2022-05-29 23:02:21 修改
阅读量1.6k 收藏 1
点赞数
分类专栏： # CSS 文章标签： 动画 css3 css
于 2021-08-19 16:07:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46048542/article/details/119791658
版权

animation动画基础语法

animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。默认值:0
animation-delay 规定在动画开始之前的延迟。值单位可以是秒（s）或毫秒（ms）。默认值: 0,提示: 允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。
animation-iteration-count 规定动画应该播放的次数。默认值:1
在这里插入图片描述

animation-timing-function 规定动画的速度曲线。默认值:ease

animation-timing-function: linear|ease|ease-in|ease-out|cubic-bezier(n,n,n,n);

在这里插入图片描述

animation-direction 规定是否应该轮流反向播放动画。默认值：normal如果把动画设置为只播放一次，则该属性没有效果。

animation-direction: normal|reverse|alternate|alternate-reverse;

在这里插入图片描述

复合写法，顺序是上面介绍顺序

.box2{width: 100px;height: 100px;background: red;animation: myBox 4s 2s infinite linear;}

等价于

       .box2{width: 100px;height: 100px;background: red;
              animation-name: myBox;
              animation-duration: 4s;
              animation-delay: 2s;/*如果是-2秒，则只执行一半过程 */
              animation-iteration-count: 3;}

综合

<!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>Document</title>
    <style>
        .box1{width: 300px;height: 300px;border: 1px black solid;margin: 30px auto;}
        .box2{width: 100px;height: 100px;background: red;
              animation-name: myBox;
              animation-duration: 4s;
              animation-delay: 2s;/*如果是-2秒，则只执行一半过程 */
              animation-iteration-count: 3;}
              /* 第二种复合写法 */
              /* .box2{width: 100px;height: 100px;background: red;animation: myBox 4s 2s infinite linear;} */
              /* infinite意思是次数无数次 */
              @keyframes myBox{
                  0%{transform: translate(0,0);}
                  25%{transform: translate(200px,0);}
                  50%{transform: translate(200px,200px);}
                  75%{transform: translate(0,200px);}
                  100%{transform: translate(0,0);}
              }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </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>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        ul{width: 600px;margin: 30px auto;}
        ul li{float: left;width: 100px;height: 100px;position: relative;}
        ul li img{position: absolute;}
        ul li:hover img{animation: move .5s;}
        @keyframes move{
            0%{transform: translate(0,0);opacity: 1;}
            60%{transform: translate(0,-100px);opacity: 0;}
            61%{transform: translate(0,100px);}
            100%{transform: translate(0,0);opacity: 1;}
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <img src="https://p2.ssl.qhimgs1.com/sdr/400__/t01948d3af3a434ed22.jpg" alt="">
        </li>
    </ul>
</body>
</html>

在这里插入图片描述

loading加载动画效果

loading加载动画效果

<!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>loading加载动画效果</title>
    <style>
        .loading{width: 40px;height: 40px;margin: 30px auto;position: relative;}
        .loading .box1, .loading .box2{width: 100%;height: 100%;position: absolute;}
        .loading .box2{transform: rotate(45deg);}
        .loading .box1 div, .loading .box2 div{width: 10px;height: 10px;background: blue;border-radius: 50%;position: absolute;animation: loadingMove 1.5s infinite linear;}
         .loading .box1 div:nth-child(1), .loading .box2 div:nth-child(1){left: 0;top: 0;}
         .loading .box1 div:nth-child(2), .loading .box2 div:nth-child(2){right: 0;top: 0;}
         .loading .box1 div:nth-child(3), .loading .box2 div:nth-child(3){right: 0;bottom: 0;}
         .loading .box1 div:nth-child(4), .loading .box2 div:nth-child(4){left: 0;bottom: 0;}
         @keyframes loadingMove{
             0%{transform: scale(1);}
             50%{transform: scale(0);}
             100%{transform: scale(1);}
         }
         .loading .box1 div:nth-child(1){animation-delay: 0;}
         .loading .box2 div:nth-child(1){animation-delay: .2s;}
         .loading .box1 div:nth-child(2){animation-delay: .4s;}
         .loading .box2 div:nth-child(2){animation-delay: .6s;}
         .loading .box1 div:nth-child(3){animation-delay: .8s;}
         .loading .box2 div:nth-child(3){animation-delay: 1s;}
         .loading .box1 div:nth-child(4){animation-delay: 1.2s;}
         .loading .box2 div:nth-child(4){animation-delay: 1.4s;}
    </style>
</head>
<body>
    <div class="loading">
    <div class="box1">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box2">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    </div>
</body>
</html>

在这里插入图片描述

animation动画扩展语法

animation-fill-mode：规定动画 播放之前或之后，其动画效果是否可见。
注释：其属性值是由逗号分隔的一个或多个填充模式关键词。默认值： none在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效。
backwards在延迟的情况下，让0%在延迟前生效
forwards在运动结束之后，停到结束的位置
both:backwards和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>Document</title>
    <style>
        .box1,.box2,.box3,.box4{width: 100px;height: 100px;background: red;margin: 5px;}
        .box1{animation: 2s move 2s;}
        .box2{animation: 2s move 2s;animation-fill-mode: backwards;}
        .box3{animation: 2s move 2s;animation-fill-mode: forwards;}
        .box4{animation: 2s move 2s;animation-fill-mode: both;}
        @keyframes move{
            0%{transform: translate(0,0);background: blue;}
            100%{transform: translate(300px,0);}
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
</body>
</html>

开始前：
在这里插入图片描述
结束后：
在这里插入图片描述
**animation-direction:**属性定义是否应该轮流反向播放动画
alternate一次正向（0%----100%）一次反向（100%—0%）
reverse永远都是反向，从100%—0%
normal(默认值）永远都是正向，从0%—100%

<!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>Document</title>
    <style>
        div{width: 100px;height: 100px;background: red;
            animation: 1s move infinite;animation-direction: alternate;}
            @keyframes move{
                0%{transform: translate(0,0);}
                100%{transform: translate(300px,0);}
            }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果途中
在这里插入图片描述

animate.css动画库

animate.css动画库
官网地址：https://daneden.github.io/animate.css/
基本使用：
animated基类（基础的样式，每个动画效果都需要加）
infinite动画的无限次数
请添加图片描述

九阈
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
animation动画全解
技术无止境，人生仍探索。
07-23 7670
animation八大属性共用 代码 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=
animation动画及3D
karry_yuan的博客
04-11 4139
animation动画及3D
css的animation动画
yuan0209的博客
11-25 1万+
顾名思义，它可以控制动画的状态 – 运行或者暂停,类似于视频播放器的开始和暂停,是 CSS 动画中有限的控制动画状态的手段之一。在 1-2 秒范围内随机，这样，我们就可以得到非常自然且不同的上升动画效果，基本不会出现重复的画面，很好的模拟了随机效果。属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由。中定义的第一帧这种说法，因为动画运行的第一帧和最后一帧的实际状态还会受到动画运行方向。，可以有效的构建更为随机的动画效果，让动画更加的自然。
推荐：animation.ibelick - Tailwind CSS 动画库
gitblog_00070的博客
06-18 317
推荐：animation.ibelick - Tailwind CSS 动画库 项目地址:https://gitcode.com/ibelick/animation 1、项目介绍 animation.ibelick 是一个专注于 Tailwind CSS 的动画集合库，它为你提供了大量的预设动画，只需简单的复制粘贴，即可轻松将这些精美的动画整合到你的项目中。这个库的创建目标是帮助开发者快速提升用...
CSS中animation动画-详解
热门推荐
qq_48109675的博客
08-30 4万+
1、animation-name ：xx （设置关键帧的名称为xx） 2、animation-duration：5s （动画持续时间为5s） 3、animation-timing-function： linear （动画时间曲线 也叫做运行速度为匀速） 取值： linear 匀速、 ​ ease （默认）低速开始—>加速—>结束前减速 、 ease-in 以低速开始、ease-out 以低速结束、ease-in-out 以低速开始和结束。 cubic-bezier(n,n,n,n)
JavaScript——animation动画
qq_20006765的博客
09-01 7871
Animations是css3的一个模块，使用keyframes定义如何随着时间的移动改变CSS的属性值，可以通过指定它们的持续时间，重复次数，如何重复来控制关键帧的行为。
Animation动画详解
亮哥的微博
06-19 2065
Unity的Animation动画Animation动画制作创建AnimationAnimation组件调用Animation需要进行的操作Animation代码调用如何Animation内部添加回调函数Animation常用的方法 Animation动画制作 目前的animation大多使用于前端的部分效果动画，比如界面打开关闭界面的效果。 创建Animation 选中待提添加动画的物体，Window—>Animation(Ctrl+6)，弹出下图视图窗口。 注意：如果选中的物体无Animation
animation动画--跳动
weixin_43853424的博客
12-07 2329
给大家分享一个小案例，让静态的一行字与一个球变为动态跳动 第一个文字动画 &lt;title&gt;&lt;/title&gt; &lt;style&gt; .box{ width: 600px; height: 150px; margin: auto; margin-top: 300px; background-color: deepskyblu...
CSS animation动画使用详解
Gik99的博客
07-12 3567
css之animation动画详解
CSS3 animation 动画用法介绍
保持清醒
12-30 7802
一、css3 动画是什么 css3动画是使用css3的动画属性，去控制页面元素，让元素从一种样式逐渐变化为另一种样式的效果。 二、css3的动画属性 三、animation 介绍 animation主要包含六个属性，具体含义如下： （一）、keyframe 在介绍animation具体使用之前，要先介绍keyframe。 @keyframes让开发者通过指定动画中特定时间点必须展现的关键帧样式（或者说停留点）来控制CSS动画的中间环节。这让开发者能够控制动画中的更多细节而不是全部让浏览器自动处理。 要使
Animation动画
01-20
### Animation动画详解 #### 一、概述 动画是Android应用中增强用户体验的重要手段之一，能够为用户带来生动直观的视觉效果。在Android开发中，主要的动画类型包括位移、翻转、透明度变化和缩放等。这些动画可以...
微信小程序实现animation动画
11-27
微信小程序实现animation动画，具体内容如下 1. 创建动画实例 wx.createAnimation(OBJECT) 创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的...
动画包_animation动画效果_源码
10-04
"动画包_animation动画效果_源码"这个资源包，显然是为了帮助开发者理解和实现各种动画效果而准备的。它可能包含了一系列使用了Android内置的animation库编写的示例代码。下面将详细讨论Android中的动画技术及其重要...
分享一个可交互的小场景（二）
一起学习一起进步~
06-25 5630
再看代码： JS部分。
CSS3 scale 适配
最新发布
m0_54007573的博客
07-24 368
CSS3 scale 适配
CSS：mix-blend-mode属性（设置元素的混合模式）
m0_65029152的博客
07-24 963
本文主要记录CSS中，mix-blend-mode属性的相关内容，并实现页面中的文字适配背景效果；
CSS学习笔记
ngczx的博客
07-23 466
CSS学习笔记
animation 动画效果快点
08-31
要将animation动画效果加快，可以通过减少animation-duration的值来实现。animation-duration是指动画的持续时间，通过缩短这个时间可以使动画播放得更快。例如，将animation-duration设置为0.2s可以加快动画效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [HTML5+CSS3+JavaScript 实现按键令小女孩移动，改变动画效果](https://blog.csdn.net/qq_55786319/article/details/126717473)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [简单谈谈Core Animation 动画效果](https://download.csdn.net/download/weixin_38624519/12778066)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值