前端 animation 动画（用的到的都写了）直接用animate库最方便用法加粗了

最新推荐文章于 2024-05-06 19:28:55 发布
最新推荐文章于 2024-05-06 19:28:55 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： 前端 animation 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SwingDance/article/details/107623030
版权

<!--建议直接复制丢到vscode去看，很清楚-->

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <link

      rel="stylesheet"

      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"

    />

    <!-- 

            animation动画

        animation-name 设置动画的名字

        animation-duration 动画的持续时间

        animation-delay 动画的延迟时间

        animation-iteration-count 动画的重复次数，默认值是1，infinite无限次数

        animation-timing-function 动画的运动形式

        animation-fill-mode 规定动画播放之前或之后，其动画效果是否可观

          none 默认 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效

          backwards 在延迟的情况下，让0%在延迟前生效

          forwards 在运动结束之后，停到结束位置

          both backwards和forwards同时生效

        animation-direction 属性定义是否应该轮流反向播放动画

          alternate 一次正向（0%-100%）,一次反向（100%-0%）

          reverse 永远都是反向，从（100%-0%）

          normal 默认 永远都是正向，从（0%-100%）

        animate css库

        网址：https://animate.style/

         <link

    rel="stylesheet"

    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"

  /> 直接复制就行link到最前面

  然后去官网找怎么用，复制样式名字添加到class中就行（具体规则根据官网定 版本不同规则不同）

 

        注：

        0%就是form 100%就是to

        用动画可以用很多关键帧


 

    -->

    <style>

      .box1 {

        width: 300px;

        height: 300px;

        border: 1px solid black;

        margin: 30px auto;

      }

      .box2 {

        width: 100px;

        height: 100px;

        background-color: blue;

        /* animation-name: myBox;

        animation-duration: 4s; */

        animation: myBox 4s 1s infinite linear;

      }

      @keyframes myBox {

        form {

          transform: translate(0, 0);

        }

        to {

          transform: translate(200px, 0);

        }

      }

      .div1,

      .div2,

      .div3,

      .div4 {

        width: 100px;

        height: 100px;

        background-color: rosybrown;

        margin: 5px;

      }

      .div1 {

        animation: 2s 1s move;

      }

      .div2 {

        animation: 2s 1s move;

        animation-fill-mode: backwards;

      }

      .div3 {

        animation: 2s 1s move;

        animation-fill-mode: forwards;

      }

      .div4 {

        animation: 2s 1s move;

        animation-fill-mode: both;

      }

      @keyframes move {

        0% {

          transform: translate(0, 0);

          background-color: royalblue;

        }

        100% {

          transform: translate(500px, 0);

        }

      }

      .fangxiang01,

      .fangxiang02,

      .fangxiang03 {

        width: 100px;

        height: 100px;

        margin-top: 20px;

        background-color: salmon;

        animation: 1s fx infinite;

      }

      .fangxiang01 {

        animation-direction: alternate;

      }

      .fangxiang02 {

        animation-direction: normal;

      }

      .fangxiang03 {

        animation-direction: reverse;

      }

      @keyframes fx {

        0% {

          transform: translate(0, 0);

        }

        100% {

          transform: translate(200px, 0);

        }

      }

      .donghua {

        width: 100px;

        height: 50px;

        margin-top: 50px;

        background-color: salmon;

      }

    </style>

  </head>

  <body>

    <div class="box1">

      <div class="box2"></div>

    </div>

 

    <div class="div1"></div>

    <div class="div2"></div>

    <div class="div3"></div>

    <div class="div4"></div>

 

    <div class="fangxiang01"></div>

    <div class="fangxiang02"></div>

    <div class="fangxiang03"></div>

 

    <div class="donghua animate__animated animate__bounce"></div>

  </body>

</html>

 

飞飞的小歪
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中使用过渡动画和第三方库[animate.style]
封景的博客
05-10 1212
vue有时需要让某些元素显示，可以使用v-if和v-show，但表达形式太过生硬，某些东西需要动画来实现，vue对过渡效果和动画效果做了封装 transition 在vue中元素的出现叫进入 在vue中元素的消失叫离开 当需要产生过渡效果的元素被包裹时会依次的应用6个样式类 进入状态三个类名 v-enter：元素在被插入之前执行，当元素被插入后被移除，定义了过渡的开始状态（很快） v-enter-active：在整个插入元素过渡状态应用，在插入之前生效在过渡完成之后失效，定义了整个插入元素的过渡状态 v-
前端vue_todoList案例实现animate.css库导入动画效果
04-12
在todoList项目中MyList组件中导入animate.css库，最终实现动画效果
CSS3 新增 动画模块_过渡 动画 往返动画
ilinda的博客
08-26 1922
过渡移动 <div></div> div{ width: 100px; height: 50px; background-color: red; transition-property: margin-left; transition-duration: 3s; } div:hover{ margin-left: 500px; } ...
前端css中animation(动画)的使用
最新发布
小蜗牛764号的博客
05-06 1345
animation常伴随着动画帧`@keyframes`一起使用。本文主要说明animation都有啥属性，然后简单的进行使用。 animation动画有多个属性，每个属性也有相应相关的值。另外我们使用过程中也可以使用简便方法，如`“animation:”+后面各属性的值，用空格隔开+“；”`的形式设置动画效果。举例如：`animation: box1 3s linear 2s infinite;`
web前端入门——CSS3特效之动画animation
L3gacy
04-02 934
动画animation 通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 关键帧的定义 不同于过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧的话来说，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。 @keyframes mymove{ from{...
css3---动画animation，前端开发学习教程
罗斯洛夫韩
03-30 1092
0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
CSS初入门：动画实现-animation和2D转换模块
lalala_dxf的博客
03-23 2668
CSS中的动画 简介 目前由于该技术的规范还没有稳定，在使用前要先确保浏览器对其兼容性。 Animations是css3的一个模块，使用keyframes定义如何随着时间的移动改变CSS的属性值，可以通过指定它们的持续时间，重复次数，如何重复来控制关键帧的行为。Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任何Js技术即可完成动画的制作。 过渡（transition）与动画（animation）之间的区别 （1）不同点：
前端必知：31. animate动画库 及 iconfont矢量库的使用
qq_52799985的博客
07-27 1779
网站首页在animate动画库我们能看到丰富多样的动画效果，对于工作和学习而言有很大的参考价值，并且他的使用方法也很简便。具体来说，Animate提供了一组预定义的动画效果和转换功能，您可以轻松地使用这些效果来为网页元素添加动画。您可以通过指定动画名称、持续时间、延迟、重复次数等参数来定制和控制动画的行为。Animate支持各种常见的动画效果，例如淡入淡出、移动、旋转、缩放、颜色变化等。您还可以创建复杂的动画序列，通过链式调用不同的动画效果来实现更多样化和连贯的动画效果。
动画的前端实现，主要使用了animate
10-31
动画的前端实现，主要使用了animate
jQuery使用animate创建动画用法实例
12-02
本文实例讲述了jQuery使用animate创建动画用法。分享给大家供大家参考。具体如下： animate的用法： animate( Hash params, String|NumberJavascript 字符串或数字值 speed, String easing , Function callback(可选...
微信小程序的动画效果：使用animation快速制作切换动画
03-29
本人也不是什么前端高手，只是一名写后端偶尔写写前端的渣渣。请前端大神们勿喷。 一、什么是微信小程序？ 　小程序在我的理解中只是高度封装的H5，封装了各种组件。根据官方的说法小程序运行不是在浏览器当中。姑且...
#前端开发# 【一】 之Animate动画库的安装及详细用法
ZHENGCHUNJUN的博客
05-25 2821
#前端开发001之动画库的详细介绍及简易用法 在前端的开发过程中，我们免不了需要动画来实现更多酷炫效果， 下面主要是介绍Animate这款强大的动画库，以及其安装及使用 相信大家也已经了解过Animate，这里就不赘述了 下面是Animate的官网 一.官网各个版块的主要作用 温馨提示：如果英文不怎么好的胖友，也可以使用谷歌自带的网页翻译器，将官网翻译成中文，最好就看英文文档啦，顺便练一下英文哈哈哈哈哈哈哈 二.Animate的使用 在vue里使用 （1）安装 在ws下面这个位置，输入cnpm
前端动画animate.css
qq_42750027的博客
11-07 274
开始 animate.css官网 下载成功后，引入文件 使用 app.vue @import './common/animate.css'; index.vue infinite保持动画 <div class=" animated pulse infinite">测试</div>
css animation实现图片切换效果
热门推荐
殇蓝的博客
01-15 1万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;meta name="viewport" content="initial-scale=1.0,
前端学习（1005）：animate方法
歌谣的博客
04-30 429
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen...
Android 实现PopWindow，显示隐藏动画，背景变暗，在页面底部
weixin_43942430的博客
11-15 440
public static PopupWindow createPopWindow(View view, View parent, Activity activity){ final PopupWindow popupWindow = new PopupWindow(view, WindowManager.LayoutParams.MATCH_PAR...
浅谈animation里的forwards
weixin_30776545的博客
07-30 1203
forwards可译为向前走， animation-fill-mode（动画填充模式），定义动画播放时间之外的状态 顾名思义，就是在动画播放完了之后给它一个状态animation-fill-mode:none|forwards|backwards|both; （1）none，播放完之后不改变默认行为，默认值 （2）forwards则是停在动画最后的的那个画面 （3）ba...
前端插件Animate.css的调用
全易
11-08 1155
引入： <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"> </head> 或者： npm install animate.css --save 调用： 为元素设置动画需要添加anima...
前端动画开源库animate.css
weixin_30433075的博客
04-13 512
Animate.css 1.简介：一个跨浏览器的 css3 动画库，内置了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）、放大缩小（等多达 60 多种动画效果，几乎包含了所有常见的动画效果。在炫酷的同时，还一直保...
使用自定义类名和animate.css动画库给一张图片的显示添加入场动画，动画效果自定义
05-30
好的，这里给你提供一种使用自定义类名和animate.css动画库给一张图片添加入场动画的示例。使用animate.css可以方便地实现CSS动画效果，具体可以根据需求自定义。 首先，需要在HTML文件中引入animate.css的CDN链接： ```html <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> ``` 然后，HTML代码如下： ```html <div class="image-wrapper animate__animated"> <img src="image.jpg" alt="图片"> </div> ``` CSS代码如下： ```css .image-wrapper { position: relative; display: inline-block; } .image-wrapper.animate__animated { animation-duration: 1s; /* 设置动画持续时间 */ animation-delay: 0.5s; /* 设置动画延迟时间 */ animation-fill-mode: both; /* 设置动画结束后保持最后状态 */ animation-name: slideInLeft; /* 设置动画名称 */ } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } .image-wrapper img { display: block; max-width: 100%; height: auto; } ``` 这段代码使用了animate.css库中的slideInLeft动画效果，通过给`.image-wrapper`添加类名`.animate__animated`来触发动画效果。其中，`.image-wrapper.animate__animated`使用了CSS3的动画属性animation，通过设置animation-duration、animation-delay、animation-fill-mode、animation-name属性来定义动画效果。同时，利用@keyframes定义了从左侧平移进入的动画效果。最后，`.image-wrapper img`设置了图片的基本样式，其中max-width: 100%可以确保图片的宽度不会超出其容器的宽度。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值