CSS3-动画

最新推荐文章于 2024-04-16 00:12:34 发布
最新推荐文章于 2024-04-16 00:12:34 发布
阅读量82 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42306826/article/details/115420315
版权

动画(animation)

  1. 什么是动画

    • 动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果

  2. 动画的基本使用

    • 先定义动画
    • 在调用定义好的动画

  3. 语法格式(定义动画)

@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
    }
}
  1. 语法格式(使用动画)
div {
	/* 调用动画 */
    animation-name: 动画名称;
 	/* 持续时间 */
 	animation-duration: 持续时间；
}
  1. 动画序列
  • 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
  • 在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
  • 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
  • 用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%
  1. 代码演示
<style>
    div {
      width: 100px;
      height: 100px;
      background-color: aquamarine;
      animation-name: move;
      animation-duration: 0.5s;
    }

    @keyframes move{
      0% {
        transform: translate(0px)
      }
      100% {
        transform: translate(500px, 0)
      }
    }
  </style>

案例：动画序列

<!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>动画序列</title>
    <style>
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(1000px, 0px);
            }
            50% {
                transform: translate(1000px, 500px);
            }
            75% {
                transform: translate(0px, 500px);
            }
            100% {
                transform: translate(0, 0);
            }
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: move 5s linear infinite;
        }
    </style>
</head>

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

</html>

动画常见属性

属性描述
@keyframes规定动画
animation所有动画属性的简写属性，除了animation-play-state属性
animation-name@keyframes动画的名称 （必填）
animation-duration动画完成一个周期的时间，默认是0（必填）
animation-timing-function动画的运动曲线，默认是ease
animation-delay规定动画从什么时候开始，默认是0
animation-iteration-count动画的播放次数，默认是1，还有infinite
animation-direction规定动画下一周期逆向播放，默认是“normal”，“alternate”逆播放
animation-play-state规定动画是否是在运行或暂停。默认是 ；running ，还有paused
animation-fill-mode动画结束后，保持forwords回到起始backwards

代码演示

div {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  /* 动画名称 */
  animation-name: move;
  /* 动画花费时长 */
  animation-duration: 2s;
  /* 动画速度曲线 */
  animation-timing-function: ease-in-out;
  /* 动画等待多长时间执行 */
  animation-delay: 2s;
  /* 规定动画播放次数 infinite: 无限循环 */
  animation-iteration-count: infinite;
  /* 是否逆行播放 */
  animation-direction: alternate;
  /* 动画结束之后的状态 */
  animation-fill-mode: forwards;
}

div:hover {
  /* 规定动画是否暂停或者播放 */
  animation-play-state: paused;
}

动画简写方式

  1. 动画简写方式

    /* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode

  2. 知识要点

    • 简写属性里面不包含 animation-paly-state
    • 暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
    • 要想动画走回来，而不是直接调回来：animation-direction: alternate
    • 盒子动画结束后，停在结束位置：animation-fill-mode: forwards

  3. 代码演示

animation: move 2s linear 1s infinite alternate forwards;

速度曲线细节

  1. 速度曲线细节
  • animation-timing-function: 规定动画的速度曲线，默认是ease
值描述
linear从头到尾速度相同，匀速
ease默认，低速开始，加速，末尾减速
ease-in动画以低速开始
ease-out动画以低速结束
ease-in-out动画以低速开始和结束
steps()指定了时间函数中的间隔数量（步长）
  1. 代码演示
div {
  width: 0px;
  height: 50px;
  line-height: 50px;
  white-space: nowrap;
  overflow: hidden;
  background-color: aquamarine;
  animation: move 4s steps(24) forwards;
}

@keyframes move {
  0% {
    width: 0px;
  }

  100% {
    width: 480px;
  }
}

案例 ：奔跑的白熊

<!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>奔跑的熊大</title>
    <style>
        body {
            background: #ccc;
        }
        
        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(img/bear.png) no-repeat;
            /* 可以写多个动画，用，分隔 */
            animation: bear .4s steps(8) infinite, move 3s forwards;
        }
        
        .div1 {
            margin-top: 240px;
        }
        
        .bg {
            width: 99%;
            height: 450px;
            background: url(img/bg1.png) no-repeat;
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: moveBg 8s linear infinite forwards;
        }
        
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        
        @keyframes move {
            0% {
                top: 0;
                left: 0;
            }
            100% {
                top: 0;
                left: 50%;
                transform: translateX(-50%);
            }
        }
        
        @keyframes moveBg {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -2000px 0;
            }
        }
    </style>
</head>

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

</html>
CLAM-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS教程--动画
小马哥的博客
02-25 2316
CSS
html div 显示动画效果,css3-动画（animation）效果的实现
weixin_28871645的博客
06-03 3893
css3-动画(animation)：具有以下属性：1、animation-name自定义动画名称2、animation-duration动画指定需要多少秒或毫秒完成，默认值是0;3、animation-timing-function动画的时间曲线，linear匀速，ease先慢后快，结束前变慢。4、animation-delay动画在启动前的延迟间隔，默认是05、animation-iterat...
CSS3 -- @keyframes动画
qq_51248309的博客
05-04 5883
一篇文章教会你css3中的动画
CSS动画-Animation
温情
10-16 5495
动画是css3中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。 相比较过渡，动画可以实现更多变化，更多控制的效果。创建动画的原理是，将一套 样式逐渐变化为另一套样式。在动画过程中我们能够多次改变这套 样式。以百分比来规定改变发生的时间，或者通过关键词 和 ，等价于 和 。 就是需要绑定的的名称 这就是定义了一个名称为的动画，被元素调用 规定动画完成一个周期所花费的时间 意思是指定元素的时间向右移动 规定动画的速率曲线，也就是动画执行过程的
舞动屏幕盛宴：CSS3 动画的创意艺术之旅
不要让努力成为一种奢望，它应该如同呼吸一样自热而然。
04-16 2676
21(22)-1(3)- CSS 动画
超详细 CSS动画-animation
热门推荐
欢迎访问我的主页：https://www.bookbook.cc
03-17 3万+
css3 animation @keyframes
css3 --- 实现动画线条运动效果实例集合
最爱松露巧克力
04-25 3707
CSS3实现动画线条运动效果实例集合（一） laoyuan2016-12-20标签：css3阅读: 5,157 在我们日常的开发中，有时候有的图片，布局块需要加一下边框运动效果，对于这些效果，我们可以使用CSS3动画属性animation，再配合css的一些技巧制作出来。下面是收藏的一些效果实例。 1、边框流动效果 html： <div class="css3-1"> <span>css3效果的内容部分</span> </div...
css3d动画库,CSS3动画库animate.css 50多种动画形式
weixin_26717681的博客
08-03 2007
今天要给大家介绍一款强大的CSS3动画库animate.css，animate.css定义了大概50多种动画形式，animate.css是一堆很酷的，有趣的，跨浏览器的动画效果库，你可以随意在你的项目中使用。用在你想要突出的任何地方，如主页，滑块，这像喝水一样容易，迷死人了。用法在您的网站上使用animate.css，只要简单地把样式表插入到文档中的中，并为需要动画的元素添加一个CSS类名即可，以...
css3 动画的实现
青蛙king的博客
12-15 2534
js 的方法实现动画（这是一个实验功能，此功能某些浏览器尚在开发中。详见这里）。@keyframes+animation：这是一个实现动画的组合，必须一起使用。transition：表示过渡。transition 可以单独使用，transform：表示变形。使用 transform 实现动画时有两种选择：transform+transition：一次性动画。transform 定义行为，transition 驱动，但一次仅能驱动一次。
css动画-3d旋转盒子
zhang_ntmare的博客
11-07 3230
left:0; right:0; top:0; bottom:0; margin：auto;会使text居中，如果text没有宽高，则会继承父集的宽高。适合body 内的遮罩 3d动画记得设置3d，transform-style: preserve-3d; 重置3d中心，transform-origin:center center;
css3-animate动画特效大全
01-08
CSS3是层叠样式表（Cascading Style Sheets）的第三个主要版本，它引入了许多新的特性和功能，其中动画效果是其一大亮点。在CSS3中，我们可以利用`@keyframes`规则创建复杂的动画特效，这使得网页交互更加生动、吸引...
html5+css3-css动画实例1
11-06
本实例“html5+css3-css动画实例1”着重于利用CSS3的动画特性来创建动态效果，使网页元素更加生动活泼，提升用户体验。 在HTML5中，我们不再依赖Flash等外部插件来实现动画效果，而是通过内联的SVG图形或者新的标签...
利用css3-animation实现逐帧动画效果
09-24
在现代网页设计中，CSS3 动画是一个强大的工具，能够为用户带来丰富的交互体验。本文将深入探讨如何利用 `css3-animation` 实现逐帧动画效果，这对于创建动态图形、游戏元素或复杂的视觉效果非常有用。 首先，我们...
CSS3边框动画
09-13
**CSS3边框动画详解** 在网页设计中，动态效果能极大地提升用户体验，CSS3的引入使得这种动态效果的实现变得更加简单和高效。本篇将深入探讨CSS3边框动画，帮助你掌握这一强大的视觉呈现工具。 ### 一、边框动画...
钢铁侠--CSS3动画
02-11
钢铁侠--CSS3动画
pi_heif-0.17.0-cp39-cp39-manylinux_2_31_armv7l.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
ubuntu20.04-ssh9.8p1-ssl3.0.14-focal-deb-amd64升级加固脚本.zip
07-27
若有新版本请查看文章最后附件地址：https://blog.csdn.net/liuxin638507/article/details/132450367 特点： 1、同时升级openssh与openssl，采用deb包形式，一键快速升级版本，无需每台单独再次进行编译， 2、隐藏openssh-版本号(openssh9.8p1及之后隐藏版本号还未找到方法) 3、已默认安全加固（已有配置跳过） 安装： 执行 bash upgrade_ssl_ssh_ubuntu.sh 进行安装 注意，升级安装后，确保sshd服务正常，请新开终端进行验证测试 验证 openssl版本： openssl version OpenSSL 3.0.14 4 Jun 2024 (Library: OpenSSL 3.0.14 4 Jun 2024) openssh版本： ssh -V OpenSSH_9.8p1, OpenSSL 3.0.14 4 Jun 2024
avif-0.5.0-cp36-cp36m-manylinux1_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
教务管理系统-毕业设计.zip
07-27
教务管理系统-毕业设计.zip
CSS3动画与JavaScript跨域实操指南
本PPT深入探讨了CSS3动画和JavaScript跨域的相关知识，适合软件工程专业的学生和开发人员参考。它由zxh计算机科学与工程学院在2016年8月24日分享，旨在提升对这两个领域的理解。 CSS3动画部分首先介绍了动画的基础...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值