CSS中animation动画-详解

这篇具有很好参考价值的文章主要介绍了CSS中animation动画-详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、animation有什么组成?

Animations由两部分组成:css动画的配置,以及一系列的keyframes(用来描述动画的开始、过程、结束状态)。不需要了解任何Js技术即可完成动画的制作

2、关键帧应该怎么表示?

0%表示动画的初始时间,也可以通过from关键字表示。100%表示动画的结束时间,也可以通过to关键字表示。

滑动案例:

图片展示:css animation,css,动画,前端

 

3、基础知识

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) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

4、animation-delay:5s  (动画等待5后开始)

5、animatiom-iteration-count:1   (动画播放次数为1次)

取值:xx数字,定义应该播放xx次动画、 infinite-无限次执行

6、animation-direction: alternate(设置动画为反向播放 )

取值:

  1. nomal(默认)-执行完一次之后回到起点继续执行下一次
  2. alternate-往返动画,执行完一次之后往回执行下一次

  3. reverse-反向执行

7、animation-fill-mode: (动画结束的最后一帧)

取值:

  1. none-不做任何改变
  2. forwards-让元素结束状态保持动画最后一帧的样式

  3. backwards-让元素等待状态的时候显示动画第一帧的样式

  4. both-等待状态显示第一帧,结束状态保持最后一帧

8、animation-play-state:  (设置动画是否暂停)

取值:running-执行动画 、paused-暂停动画

4、animation 简写

animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画

animation:动画名称 动画时长  (有这两个即可以完成动画,其它未设置,有默认值)

5、关键帧的书写

第一种from to

    @keyframes swipe {

      /* 开始 */
      from {
        css样式
      }

      to {
        css样式
      }
    }

第二种:百分比文章来源地址https://www.toymoban.com/news/detail-790048.html

    @keyframes LeftToRight {
      0% {
        css样式
      }

      50% {
        css样式
      }

      100% {
        css样式
      }
    }
可以分多段

6、简单的滑动案例

<!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-color: red;
      /*动画配置 */
      /* 1、设置动画名称 */
      animation-name: LeftToRight;
      /* 2、动画持续时间 */
      animation-duration: 2s;
      /* 3、动画执行速度 */
      animation-timing-function: linear;
      /* 4、等待时长 */
      /* animation-delay: 2s; */
      /* 5、设置动画播放次数 */
      animation-iteration-count: infinite;
      /* 6、设置动画是否反向播放 */
      animation-direction: alternate;
      /* 7、动画结束时应用最后一帧 */
      animation-fill-mode: forwards;
      /* animation: name duration timing-function delay iteration-count direction fill-mode; */
    }

    /* 动画关键帧 */
    div:hover {
      /* 设置动画是否暂停*/
      animation-play-state: paused;
    }

    @keyframes LeftToRight {
      0% {
        margin-left: 0px;
      }

      25% {
        margin-left: 200px;
      }

      50% {
        margin-left: 300px;
      }

      75% {
        margin-left: 500px;
      }

      100% {
        margin-left: 1000px;
      }
    }
  </style>

</head>

<body>
  <div>

  </div>

</body>

</html>

到了这里,关于CSS中animation动画-详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css动画(animation)常用属性

                               1.animation-name:动画名称                                       2.@keyframes:动画定义,后面跟动画名称                                      3.animation-duration:动画持续时长,单位(s)                         

    2023年04月27日
    浏览(49)
  • 神仙般的css动画参考网址,使用animate.css

    Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints. https://animate.style/ 这里面有很多简单的css样式,可以引这个包,但是也可以根据他的源码改动一下,很简

    2024年02月11日
    浏览(33)
  • CSS笔记——触发式动画Transition、主动式动画Animation、Transfrom 动画、CSS 3D 动画、阴影和滤镜样式

    一、触发式动画Transition transition过渡动画, 一般配合伪类使用 属性值: transition-duration: 指定过渡效果的持续时间,以秒或毫秒为单位。 transition-timing-function: 指定过渡效果的时间函数,即控制过渡速度的函数。常用的值有 ease、linear、ease-in、ease-out、ease-in-out 等。 transi

    2024年02月07日
    浏览(52)
  • HTML之CSS Animation 属性常用动画

    引入下面的样式表后 -webkit-animation: tada 1s ease 0.3s infinite both; -webkit-animation: name duration timing-function delay iteration_count direction animation 各个参数详细用法请看 https://www.w3school.com.cn/css/css3_animations.asp cubic-bezier 生成器 https://cubic-bezier.com

    2024年01月19日
    浏览(48)
  • animation.css无法显示动画效果问题解决

    在使用【微信开发者工具】开发微信小程序时发现无法在开发者工具中展示出动画效果来 但是真机调试中可以正常的显示动画效果 【关于微信小程序中如何使用animation.css,参考微信小程序使用animation.css_THE WHY的博客-CSDN博客 】 同时发现在官网上点击各个动画并不能展示动

    2024年02月16日
    浏览(43)
  • css3之animation 提交按钮简单的动画

     

    2024年02月11日
    浏览(42)
  • 011:vue结合css动画animation实现下雪效果

    GIF录屏文件太卡有点卡,实际是很丝滑的 在 src 下新建 components 文件,创建 VabSnow.vue 组件文件 没啥注意的,主要是scss的变量操作及css动画 😎

    2024年01月19日
    浏览(53)
  • CSS3 高级- 复杂选择器、内容生成、变形(transform)、过渡(transition)、动画(animation)

    兄弟选择器:选择平级元素的唯一办法 -适用:通过已知元素选择之后的平级兄弟元素时 1、相邻兄弟选择器: 2、通用兄弟选择器: 属性选择器: -通过元素的属性来定位元素 1、通用:基本用不着,太泛了 2、自定义:4种 1、精确条件: 2、模糊条件: 3、模糊条件:很少用,

    2024年04月09日
    浏览(51)
  • css空间转换/视距/空间旋转/立体呈现/3d导航案例/空间缩放/animation动画/走马灯案例/精灵动画/多组动画/全民出游案例

    空间:是从坐标轴角度定义xyz三条坐标轴构成了一个立体空间按,z轴位置与视线方向相同。 属性:transform         transform:translate3d(x,y,z);         transform:translatex();         transform:translatey();         transform:translatez(); 取值(正负均可)         像素

    2024年04月22日
    浏览(44)
  • 探索前端动画之CSS魔法

    在现代网页设计中,动画已经成为了吸引用户注意力、提升用户体验的重要手段之一。而在前端开发中,CSS动画是一种常见且强大的实现方式。本篇博客将带你深入探索前端动画中的CSS魔法,通过清晰的思路和完整的示例代码,帮助你掌握如何创建令人惊艳的前端动画效果。

    2024年02月13日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包