CSS3--animation属性复合

最新推荐文章于 2023-07-10 17:30:40 发布
最新推荐文章于 2023-07-10 17:30:40 发布
阅读量1.8k 收藏
点赞数
文章标签： CSS3 CSS动画 animation
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AsaZyf/article/details/83863202
版权

code：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
div > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-position: center; }
div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation: circle_inner linear 10s infinite;
            animation: circle_inner linear 10s infinite;
}
div > .middle { background-image: url(images/circle_middle.png);
    -webkit-animation: circle_middle linear 10s infinite;
            animation: circle_middle linear 10s infinite;
}
div > .outer { background-image: url(images/circle_outer.png);
    -webkit-animation: circle_outer linear 10s infinite;
            animation: circle_outer linear 10s infinite;
}
div > .imooc { background-image: url(images/imooc.png); }
@keyframes circle_inner {
    from { transform: rotateX(0deg);   }
    to   { transform: rotateX(360deg); }
}
@keyframes circle_middle {
    from { transform: rotateY(0deg);   }
    to   { transform: rotateY(360deg); }
}
@keyframes circle_outer {
    from { transform: rotateZ(0deg);   }
    to   { transform: rotateZ(360deg); }
}
</style>
</head>
<body>
<div>
    <div class="inner"></div>
    <div class="middle"></div>
    <div class="outer"></div>
    <div class="imooc"></div>
</div>
</body>
</html>

 

AsaZyf
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
动画效果--animation
weixin_51391923的博客
07-13 3917
1.动画的基本使用 2.@keyframes 定义动画 3.初步使用 1.常见的一些属性 2.复合属性和拆分属性 3.动画帧（steps实现逐帧动画） 动画( animation)是CSS3https://so.csdn.
CSS3的animation（动画） 属性
weixin_43601334的博客
11-12 305
为了让网页更加精致美观，通常会采用添加动画的方法，今天我来给大家分享一下CSS3中的animation（动画） 属性。要创建 CSS3 动画，你需要了解 @keyframes 规则 @keyframes 规则 @keyframes 规则是创建动画。 @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。 当在 @keyframes 创建动画，把它绑定到一个选择器...
animation动画复合属性
学习笔记
06-19 1360
css3中的animation动画复合属性：name(绑定的动画名称) duration(完成时间) timing-function(如何完成一个周期) delay(启动前间隔) iteration-count(播放次数) direction(是否反向) fill-mode(不播放时的样式) play-state(运行或暂停) ...
CSS3动画Animation的八大属性
qq_32458791的博客
07-10 1224
版权声明：本文为CSDN博主「Summer_water」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。cubic-bezier(, , , )：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内。3.animation-timing-function 检索或设置对象动画的过渡类型。5.animation-iteration-count 检索或设置对象动画的循环次数。ease-in：由慢到快。8.animation-fill-mode 检索或设置对象动画时间之外的状态。
CSS3 动画animation
Jana Jing的分享
03-10 493
animation也是一个复合属性，包括animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state、animation-fill-mode共8个子属性 animation-name: 动画名称(默认值为none) animation-duration: 持续时间(默认值为0) an
CSS animation动画使用详解
Gik99的博客
07-12 3556
css之animation动画详解
CSS3 animation属性
亚丝娜
05-06 101
animation顾名思义为动画的意思。Animation应用在页面DOM上 使其产生动画的效果 animation vs transition 相同点：都是随着时间改变元素的属性值。 不同点：transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性； 初始效果——最终的效果之间的变化； ...
CSS3-animation（动画）_Animation_css_
10-03
**CSS3 动画简介** CSS3（Cascading Style Sheets 第三代）是网页样式表语言，它极大地扩展了对网页元素的...通过深入理解@keyframes规则和animation属性，我们可以为网站增添更多互动性和视觉吸引力，提升用户体验。
CSS3中Animation动画属性用法详解
09-24
在CSS3中，Animation属性是实现动态效果的关键，它允许我们创建复杂的动画序列，而无需依赖JavaScript或者其他外部库。本文将深入讲解CSS3中的Animation属性及其用法。 首先，我们来了解一下`@keyframes`规则，这是...
css3弹力球动画animation属性制作3D弹力球弹跳动画效果
09-14
在CSS3中，`animation`属性是一个强大的工具，它允许我们创建复杂的动态效果，比如我们的主题——3D弹力球的弹跳动画。这个动画效果不仅增强了用户界面的视觉吸引力，还能提供更好的交互体验。接下来，我们将深入...
纯css3 animation属性制作旋转文字动画切换效果
11-23
一、CSS3 Animation属性 `animation`属性是CSS3中的一组复合属性，用于控制元素的动画效果。它允许我们定义动画的多个关键帧（keyframes），以及动画的持续时间、延迟、速度曲线和重复次数等参数。`animation`属性...
Css3 animation---介绍如何实现css的动画
03-27
### 三、animation属性 `animation`属性是CSS3 Animation的核心，它是一个复合属性，可以包含多个子属性，如`animation-name`、`animation-duration`、`animation-timing-function`等。以下是一个完整的`animation`...
css关键帧动画：属性：animation
YY的博客
10-03 854
关键帧动画animation的属性介绍
深入理解CSS动画animation
04-21 620
　transition过渡是通过初始和结束两个状态之间的平滑过渡实现简单动画的；而animation则是通过关键帧@keyframes来实现更为复杂的动画效果。本文将介绍关于animation动画的相关知识 定义 　　和transition类似，animation也是一个复合属性，包括animation-name、animation-duration、animation-t...
过渡、形变及动画
yss2917897194的博客
07-06 241
形变，过渡，动画
animation的八大属性及HTML基础动画效果——平移、旋转、缩放、倾斜、过渡
热门推荐
weixin_43183219的博客
01-09 1万+
animation的八个基础属性、关键帧详细介绍，平移、旋转、缩放、倾斜、过渡的解释及应用
css3的animation动画创建和使用
裤兜的博客
02-27 435
一.animation有的属性: 1、animation-name(动画名称) animation-name属性是必须存在的，因为animation-name的值默认是none，没有动画。 2、animation-duration(动画执行一次所需时间) animation-duration属性也是必须存在的，因为animation-duration的值默认是0，没有动画。 3、animation-delay(动画在开始前的延迟时间) animation-delay的值可以是秒（s）或者是毫秒（ms）,默认
CSS animation复合动画,css3 – 将多个css动画合并成一个整体动画
weixin_28894087的博客
08-04 1739
我有一组动画，我排队一个接一个，创建一个更大的整体动画。为了简单起见，我创建了一个简单的小提琴来演示我的意思，但它是我想实现的一个简化版本(底部代码)…我想做的是将所有这些组合成一个动画，而不是几个。目前，我添加了一个类来触发动画的不同阶段，但我想要做的是只添加一个类来启动动画，然后它会去。我不知道如何将动画组合成一个，因为他们工作在不同的元素。我还是相当新的CSS3动画，所以有可能做到这一点吗？...
Java软件开发实战 Java基础与案例开发详解 19-7 综合示例 共10页.pdf
最新发布
07-07
完整版：https://download.csdn.net/download/qq_27595745/89522468 【课程大纲】 1-1 什么是java 1-2 认识java语言 1-3 java平台的体系结构 1-4 java SE环境安装和配置 2-1 java程序简介 2-2 计算机中的程序 2-3 java程序 2-4 java类库组织结构和文档 2-5 java虚拟机简介 2-6 java的垃圾回收器 2-7 java上机练习 3-1 java语言基础入门 3-2 数据的分类 3-3 标识符、关键字和常量 3-4 运算符 3-5 表达式 3-6 顺序结构和选择结构 3-7 循环语句 3-8 跳转语句 3-9 MyEclipse工具介绍 3-10 java基础知识章节练习 4-1 一维数组 4-2 数组应用 4-3 多维数组 4-4 排序算法 4-5 增强for循环 4-6 数组和排序算法章节练习 5-0 抽象和封装 5-1 面向过程的设计思想 5-2 面向对象的设计思想 5-3 抽象 5-4 封装 5-5 属性 5-6 方法的定义 5-7 this关键字 5-8 javaBean 5-9 包 package 5-10 抽象和封装章节练习 6-0 继承和多态 6-1 继承 6-2 object类 6-3 多态 6-4 访问修饰符 6-5 static修饰符 6-6 final修饰符 6-7 abstract修饰符 6-8 接口 6-9 继承和多态 章节练习 7-1 面向对象的分析与设计简介 7-2 对象模型建立 7-3 类之间的关系 7-4 软件的可维护与复用设计原则 7-5 面向对象的设计与分析 章节练习 8-1 内部类与包装器 8-2 对象包装器 8-3 装箱和拆箱 8-4 练习题 9-1 常用类介绍 9-2 StringBuffer和String Builder类 9-3 Rintime类的使用 9-4 日期类简介 9-5 java程序国际化的实现 9-6 Random类和Math类 9-7 枚举 9-8 练习题 10-1 java异常处理 10-2 认识异常 10-3 使用try和catch捕获异常 10-4 使用throw和throws引发异常 10-5 finally关键字 10-6 getMessage和printStackTrace方法 10-7 异常分类 10-8 自定义异常类 10-9 练习题 11-1 Java集合框架和泛型机制 11-2 Collection接口 11-3 Set接口实现类 11-4 List接口实现类 11-5 Map接口 11-6 Collections类 11-7 泛型概述 11-8 练习题 12-1 多线程 12-2 线程的生命周期 12-3 线程的调度和优先级 12-4 线程的同步 12-5 集合类的同步问题 12-6 用Timer类调度任务 12-7 练习题 13-1 Java IO 13-2 Java IO原理 13-3 流类的结构 13-4 文件流 13-5 缓冲流 13-6 转换流 13-7 数据流 13-8 打印流 13-9 对象流 13-10 随机存取文件流 13-11 zip文件流 13-12 练习题 14-1 图形用户界面设计 14-2 事件处理机制 14-3 AWT常用组件 14-4 swing简介 14-5 可视化开发swing组件 14-6 声音的播放和处理 14-7 2D图形的绘制 14-8 练习题 15-1 反射 15-2 使用Java反射机制 15-3 反射与动态代理 15-4 练习题 16-1 Java标注 16-2 JDK内置的基本标注类型 16-3 自定义标注类型 16-4 对标注进行标注 16-5 利用反射获取标注信息 16-6 练习题 17-1 顶目实战1-单机版五子棋游戏 17-2 总体设计 17-3 代码实现 17-4 程序的运行与发布 17-5 手动生成可执行JAR文件 17-6 练习题 18-1 Java数据库编程 18-2 JDBC类和接口 18-3 JDBC操作SQL 18-4 JDBC基本示例 18-5 JDBC应用示例 18-6 练习题 19-1 。。。
css3动画-animation各个属性详解
06-28
### 回答1： CSS3动画是一种非常强大的动画技术，它可以让网页变得更加生动、美丽。本文将为大家详细介绍CSS3动画的各个属性，包括动画名称，持续时间，延迟时间，动画速度曲线，以及动画的执行次数等。 动画名称（animation-name）：与CSS中的类似，动画名称是指定CSS3动画所使用的关键帧动画。这个属性用来指定一个已定义的动画名称，以便调用该动画。 持续时间（animation-duration）：定义CSS3动画的持续时间。默认值为0，表示没有动画效果。通过使用单位“秒（s）”或“毫秒（ms）”来定义动画的持续时间。 延迟时间（animation-delay）：指定动画开始前的等待时长。默认值为0，即动画将立即开始。通过使用单位“秒（s）”或“毫秒（ms）”来定义延迟时间。 动画速度曲线（animation-timing-function）：定义动画的速度曲线，可以使动画有更加自然的过渡效果。使用缓动函数可以让动画更具有灵活性，可以在不同的时间点采用不同的速度曲线，从而实现更复杂的动画效果。 动画执行次数（animation-iteration-count）：指定动画的执行次数。可以使用数字或者“infinite”关键字来指定动画的执行次数。如果将其设置为“infinite”则表示动画将一直持续执行下去。 动画方向（animation-direction）：指定动画是否循环播放，并且指定循环播放的方向。这个属性可以使用以下值：normal，reverse，alternate和alternate-reverse。 动画填充模式（animation-fill-mode）：指定动画在开始或结束时对元素的样式应该如何处理。使用这个属性可以让动画具有更加平滑的效果，可以避免由于动画结束时样式的改变而造成的过度影响。 总之，通过使用上述属性，我们可以为网页添加各种丰富的动画效果，让网页更加互动、生动，也更能吸引用户的眼球。 ### 回答2： CSS3动画是网页开发中非常常用的一种技术，通过使用动画属性可以给页面的元素增添动态的效果。本文将详细介绍CSS3动画的各个属性。 1. animation-name 该属性定义要绑定到要执行动画的@keyframes的名称。@keyframes是定义动画的关键帧的规则集合。 2. animation-duration 该属性定义了动画完成所需的时间，以秒或毫秒为单位。 3. animation-timing-function 该属性定义了动画执行的时间曲线。通过使用不同的时序函数，可以使动画更真实，更有质感。 4. animation-delay 该属性定义动画开始之前的延迟时间，以秒或毫秒为单位。 5. animation-iteration-count 该属性定义动画的迭代次数。可以将其设置为有限或无限。 6. animation-direction 该属性定义动画是否反向播放。 7. animation-fill-mode 该属性定义了元素在动画之前和之后的状态。可以设置为none、forwards、backwards或both。 8. animation-play-state 该属性定义动画的运行状态。可以将其设置为paused或running。 9. animation animation属性是所有动画属性的缩写。它接受每个属性的值作为逗号分隔列表。 总结： 上述就是CSS3动画常用属性的详细介绍。CSS3动画可以用来为页面增添动态效果，提高用户的交互体验。在实际开发中，可以通过不同的动画属性以及不同的取值方式，创建出各种不同的动画效果。在制作动画时，需要考虑兼容性问题，如果要兼容IE9及以下版本，我们还需要使用Vendor Prefix前缀来避免浏览器的兼容问题。 ### 回答3： CSS3动画是将元素从一个状态变换到另一个状态的方式，其中使用了一些简单的CSS属性。CSS3动画属性可以通过@keyframe规则或transition属性设置。它们可以用来创造一些很棒的效果，比如向上滚动的标题、浮动的按钮等。下面详细介绍一下CSS3动画涉及的各种属性。 1. animation-name：用来定义动画的名称，这个名称会由animation属性引用。 2. animation-duration：定义动画的持续时间。单位为秒（s）和毫秒（ms）。 3. animation-timing-function：定义动画的速度变化曲线。这个属性定义了过渡的速度，是一个三次贝塞尔函数。可以设置ease、linear、ease-in、ease-out、ease-in-out和cubic-bezier等值。 4. animation-delay：定义动画开始之前的延迟时间。单位为秒（s）和毫秒（ms）。 5. animation-iteration-count：定义动画的重复次数。可以设置为一个具体的数字或infinite表示无限次重复。 6. animation-direction：定义动画结束后是否负向重复播放。可以设置为normal、reverse、alternate和alternate-reverse。 7. animation-play-state：定义动画是运行还是暂停。可以设置为paused和running。 8. animation-fill-mode：定义动画结束后如何应用样式。可以设置为none、forwards、backwards和both。 以上是CSS3动画中涉及的主要属性。其中最重要的要数animation-iteration-count和animation-duration两个属性。animation-iteration-count可以定义动画的重复次数，也可以设置为infinite表示无限次重复。animation-duration用来定义动画的持续时间，如果不设置，默认值为0，此时动画是不会播放的。在设置这两个属性时，需要根据具体情况来确定合适的数值，以达到最佳的动画效果。 总的来说，CSS3动画提供了丰富的效果和属性，可以应用于页面中的各种元素和功能，让页面更加生动、美观、时尚。在开发过程中，合理应用这些属性，可以使前端开发变得更加有趣和富有挑战性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值