当前位置：文档之家 › CSS3动画

CSS3动画

  • 格式：pptx
  • 大小：262.47 KB
  • 文档页数：11

下载文档原格式

  / 11

合集下载

css3动画行走的小人案例

css3动画行走的小人案例

css3动画行走的小人案例以下是一个简单的CSS3动画行走的小人案例：HTML代码：```html<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href=""> </head><body><div id="walk"></div></body></html>```CSS代码（）：```csswalk {width: 47px;height: 175px;border: 1px solid black;margin: 250px auto;background: url(img/);animation: walk 1s steps(5) infinite;}keyframes walk {from {background-position: 0px;}to {background-position: 520px;}}```在这个案例中，我们使用了一个`div`元素来代表行走的小人。

通过设置`width`、`height`、`border`等属性，我们可以定义小人的外观。

然后，我们使用CSS的`background`属性来设置背景图片，并使用`animation`属性来创建动画效果。

通过设置`steps(5)`，我们将动画分为5个步骤，从而实现行走的效果。

最后，我们使用`infinite`关键字来使动画无限循环。

css3 animation多个动画连起来写

css3 animation多个动画连起来写

CSS3 Animation多个动画连起来写一、概述在网页设计中，动画是一个非常重要的元素，可以为网页增添生动的色彩和活力。

而CSS3 Animation作为一种能够轻松实现动画效果的技术，更是备受青睐。

本文将详细介绍CSS3 Animation中如何多个动画连起来写，以及在实际项目中的应用。

二、CSS3 Animation基础在介绍多个动画怎样连起来写之前，首先我们需要了解CSS3 Animation的基础知识。

CSS3 Animation是通过keyframes规则来创建动画的。

keyframes规则用于创建动画，动画是逐渐改变从一组CSS样式到另一组CSS样式的过程。

CSS3 Animation的基本语法如下：```csskeyframes animation-name{0 { CSS style }100 { CSS style }}```在此基础上，我们可以通过对不同的关键帧（0、25、50、75、100等）设置不同的CSS样式，从而实现动画效果。

接下来，我们将介绍如何将多个动画连接起来写。

三、多个动画连起来写在实际的网页设计中，有时候我们需要将多个动画连贯地呈现出来，这就需要用到多个keyframes规则来实现。

下面我们以一个简单的例子来说明如何将多个动画连起来写。

```csskeyframes move {0 { left: 0; }50 { left: 200px; }100 { left: 400px; }}keyframes colorChange {0 { background-color: red; }50 { background-color: blue; }100 { background-color: green; }}.element {width: 50px;height: 50px;background-color: red;position: relative;animation: move 2s linear, colorChange 2s linear;}```在上面的例子中，我们定义了两个keyframes规则，分别是move和colorChange。

css3的动画特效--动画序列（animation）

css3的动画特效--动画序列（animation）

css3的动画特效--动画序列（animation）⾸先复习⼀下animation动画添加各种参数（1）infinite参数，表⽰动画将⽆限循环。

在速度曲线和播放次数之间还可以插⼊⼀个时间参数，⽤以设置动画延迟的时间。

如希望使图标在1秒钟后再开始旋转，并旋转两次，代码如下.close:hover::before{-webkit-animation: spin 1s linear 1s 2;animation: spin 1s linear 1s 2;}（2）alternate参数。

animation动画中加⼊反向播放参数alternate。

在加⼊该参数后，动画将在偶数次数时反向播放动画。

.close:hover::before{-webkit-animation: spin 1s linear 1s 2 alternate;animation: spin 1s linear 1s 2 alternate;}animation属性参数中，延迟参数是我们较为常⽤的⼀种参数。

当动画的对象为多个时，我们常常⽤延迟参数来形成动画序列。

如以下代码定义了5个不同的图标：<span class="close icon-suningliujinyun">Close</span><span class="close icon-shousuo">Close</span><span class="close icon-zhankai">Close</span><span class="close icon-diaoyonglian">Close</span><span class="close icon-lingshouyun">Close</span>图标的基本样式和之前的Close图标⼀致，不同之处在于此处的图标都设置为inline-block，使它们能够横向排列。

CSS3动画（360度旋转、旋转放大、放大、移动）

CSS3动画（360度旋转、旋转放大、放大、移动）

CSS3动画（360度旋转、旋转放⼤、放⼤、移动）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style type="text/css">div{width:120px;height:120px;line-height:120px;margin: 20px;background-color: #5cb85c;float: left;font-size: 12px;text-align: center;color:orangered;}/*效果⼀：360°旋转修改rotate(旋转度数)*/.img1 {transition: All 0.4s ease-in-out;-webkit-transition: All 0.4s ease-in-out;-moz-transition: All 0.4s ease-in-out;-o-transition: All 0.4s ease-in-out;}.img1:hover {transform: rotate(360deg);-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);}/*效果⼆：放⼤修改scale(放⼤的值)*/.img2 {transition: All 0.4s ease-in-out;-webkit-transition: All 0.4s ease-in-out;-moz-transition: All 0.4s ease-in-out;-o-transition: All 0.4s ease-in-out;}.img2:hover {transform: scale(1.2);-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);-ms-transform: scale(1.2);}/*效果三：旋转放⼤修改rotate(旋转度数) scale(放⼤值)*/.img3 {transition: All 0.4s ease-in-out;-webkit-transition: All 0.4s ease-in-out;-moz-transition: All 0.4s ease-in-out;-o-transition: All 0.4s ease-in-out;}.img3:hover {transform: rotate(360deg) scale(1.2);-webkit-transform: rotate(360deg) scale(1.2);-moz-transform: rotate(360deg) scale(1.2);-o-transform: rotate(360deg) scale(1.2);-ms-transform: rotate(360deg) scale(1.2);}/*效果四：上下左右移动修改translate(x轴,y轴)*/.img4 {transition: All 0.4s ease-in-out;-webkit-transition: All 0.4s ease-in-out;-moz-transition: All 0.4s ease-in-out;-o-transition: All 0.4s ease-in-out;}.img4:hover {transform: translate(0, -10px);-webkit-transform: translate(0, -10px);-moz-transform: translate(0, -10px);-o-transform: translate(0, -10px);-ms-transform: translate(0, -10px);}</style></head><body><div class="img1">效果⼀：360°旋转 </div><div class="img2">效果⼆：放⼤</div><div class="img3">效果三：旋转放⼤</div><div class="img4">效果四：上下左右移动 </div> </body></html>。

CSS3属性中有关于制作动画的三个属性

CSS3属性中有关于制作动画的三个属性

CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation；我们一起学习完了Transform和Transition，让我们对元素实现了一些基本的动画效果，这些我想足以让大家激动了一阵子，今天我们趁着这个热劲继续第三个动画属性Animation的学习，单从Animation 字面上的意思，我们就知道是“动画”的意思。

但CSS3中的Animation与HTML5中的Canvas 绘制动画又不同，Animation只应用在页面上已存在的DOM元素上，而且他跟Flash和JavaScript以及jQuery制作出来的动画效果又不一样，因为我们使用CSS3的Animation制作动画我们可以省去复杂的js,jquery代码（像我这种不懂js的人来说是件很高兴的事了），只是有一点不足之处，我们运用Animation能创建自己想要的一些动画效果，但是有点粗糙，如果想要制作比较好的动画，我见意大家还是使用flash或js等。

虽然说Animation制作出来的动画简单粗糙，但我想还是不能减少我们大家对其学习的热情。

在开始介绍Animation之前我们有必要先来了解一个特殊的东西，那就是"Keyframes",我们把他叫做“关键帧”，玩过flash的朋友可能对这个东西并不会陌生。

下面我们就一起来看看这个“Keyframes”是什么东西。

前面我们在使用transition 制作一个简单的transition效果时，我们包括了初始属性和最终属性，一个开始执行动作时间和一个延续动作时间以及动作的变换速率，其实这些值都是一个中间值，如果我们要控制的更细一些，比如说我要第一个时间段执行什么动作，第二个时间段执行什么动作（换到flash中说，就是第一帧我要执行什么动作，第二帧我要执行什么动作），这样我们用Transition就很难实现了，此时我们也需要这样的一个“关键帧”来控制。

Web前端技术-第章 CSS新增动画特效含答案 (二)

Web前端技术-第章 CSS新增动画特效含答案 (二)

Web前端技术-第章 CSS新增动画特效含答案(二)- CSS新增动画特效含答案 -1. CSS3动画的基本概念CSS3动画是指利用CSS3技术实现的页面元素动态效果，包括过渡、变形、旋转、平移、缩放、透明度等。

CSS3动画具有兼容性好、效果丰富、代码简洁等优点，被广泛应用于网页设计中。

2. CSS3动画的基本语法CSS3动画的基本语法包括关键帧、动画属性和动画执行时间。

其中，关键帧定义了动画开始和结束时的状态，动画属性定义了动画的表现形式，动画执行时间定义了动画的持续时间。

3. CSS3动画的实现方法CSS3动画的实现方法主要有两种：一种是利用CSS3的transition属性实现简单的动画效果，另一种是利用CSS3的animation属性实现更加复杂的动画效果。

4. CSS3动画的应用场景CSS3动画可以应用于网页设计的各个方面，如导航菜单、图片轮播、页面切换等。

在实际应用中，需要根据具体的需求选择合适的动画效果，以达到最佳的视觉效果和用户体验。

5. CSS3动画的常见问题及解决方法在使用CSS3动画时，常见的问题包括兼容性、性能、代码复杂度等。

为了解决这些问题，可以采取以下措施：使用浏览器前缀、优化代码、减少动画执行时间等。

6. CSS3动画的优化技巧为了提高CSS3动画的性能和效果，可以采取一些优化技巧，如使用硬件加速、合理设置动画属性、避免频繁重绘等。

这些技巧可以有效提升网页的加载速度和用户体验。

7. CSS3动画的未来发展趋势随着互联网技术的不断发展，CSS3动画也在不断更新和完善。

未来，CSS3动画将更加智能化、个性化和实用化，为网页设计带来更加丰富和多样的视觉效果和交互体验。

总之，CSS3动画是一种非常实用和有趣的网页设计技术，可以为网页带来更加生动和动态的视觉效果，提高用户体验和品牌形象。

希望本文对您有所帮助，欢迎大家多多学习和应用。

css3实现循环执行动画，且动画每次都有延迟

css3实现循环执行动画，且动画每次都有延迟

css3实现循环执⾏动画，且动画每次都有延迟⼀、最终效果需求：gift图⽚的⼩动画每隔2s执⾏⼀次。

需求就⼀句话，我们看⼀下实现过程。

⼆、实现过程1、⽹页结构<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>a {display: inline-block;background-color: #cc2222;text-decoration: none;color: #fff;font-size: 14px;padding: 10px 12px;width: 100px;position: relative;}.ico {position: absolute;width: 14px;height: 16px;background: url(images/ico.png) no-repeat center;background-size: 100%;position: absolute;top: 4px;right: 27px;}</style></head><body><nav><a href="javascript:;" class="box">⼀元夺宝<div class="ico"></div></a></nav></body></html>View Code2、原始动画原始动画效果为：⿏标hover上去出现动画。

动画样式如下：/*动画*/.ico:hover{-webkit-animation: Tada 1s both;-moz-animation: Tada 1s both;-ms-animation: Tada 1s both;animation: Tada 1s both}/*浏览器兼容性部分略过*/@keyframes Tada {0% {transform: scale(1);transform: scale(1)}10%,20% {transform: scale(0.9) rotate(-3deg);transform: scale(0.9) rotate(-3deg)}30%,50%,70%,90% {transform: scale(1.1) rotate(3deg);transform: scale(1.1) rotate(3deg)}40%,60%,80% {transform: scale(1.1) rotate(-3deg);transform: scale(1.1) rotate(-3deg)}100% {transform: scale(1) rotate(0);transform: scale(1) rotate(0)}}效果：⿏标hover上去gift图⽚会动⼀动。

CSS3中的过渡、动画和变换

CSS3中的过渡、动画和变换

CSS3中的过渡、动画和变换⼀、过渡 过渡效果⼀般由浏览器直接改变元素的CSS属性实现。

a、transition属性 transition 属性是⼀个简写属性，⽤于设置四个过渡属性：transition-propertytransition-durationtransition-timing-functiontransition-delay 注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产⽣过渡效果。

　1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Document</title>6<style type="text/css">7 div{8 width: 100px;9 height: 100px;10 background: blue;11 transition: width 2s,background 3s,3S linear 3s;12 }13 div:hover{14 width: 300px;15 background: red;16 transition: width,background, 3s linear 2s;17 }18</style>19</head>20<body>21<div>2223</div>24</body>25</html> 可以设置设置某个属性的过渡持续时间（transition: width 2s,background 3s,3s linear 3s;），也可以设置所有的属性的过渡的持续时间（transition: width,background, 3s linear 2s）属性值和时间必须⽤逗号隔开; b、transition-property transition-property 属性规定应⽤过渡效果的 CSS 属性的名称。

js触发css3动画写法

js触发css3动画写法

js触发css3动画写法
在JavaScript中触发CSS3动画可以通过修改元素的CSS类或样式来实现。

下面是一个简单的示例，展示如何使用JavaScript触发一个CSS3动画：
首先，假设我们有一个CSS样式定义了一个动画：
```css
keyframes example {
0% {background-color: red;}
50% {background-color: blue;}
100% {background-color: green;}
}
.animate {
animation-name: example;
animation-duration: 4s;
}
```
然后，我们可以在JavaScript中添加或删除这个类来触发动画：
```javascript
// 获取元素
var element = ('myElement');
// 添加动画类，触发动画
('animate');
// 在动画结束后移除动画类，防止重复触发
('animationend', function() {
('animate');
});
```
在这个例子中，我们首先获取了ID为`myElement`的元素，然后使用`()`方法添加了`animate`类，这将触发CSS中定义的动画。

然后，我们添加了一个事件监听器，当动画结束时（`animationend`事件被触发），我们将
`animate`类从元素中移除，防止动画重复触发。

CSS3自定义动画（animation）

CSS3自定义动画（animation）

CSS3⾃定义动画（animation）除了在之前的⽂章中介绍过的 CSS3 的变形 (transformation) 和转换 (transition) 外，CSS3 还有⼀种⾃由度更⼤的⾃定义动画，开发者甚⾄可以使⽤变形（transformation）和转换（transition）制作⾃定义动画，利⽤纯 CSS 制作出像 Flash ⼀样的效果。

在实际使⽤中不难发现，变形和转换更适合做元素的交互，⽽⾃定义动画除了做交互外还能使到⽹页具有活⼒，有了⾃定义动画，利⽤ CSS 代替 Flash 才会更加现实。

⾸先看看 animation 的效果 —— 。

⼀. animation 基础animation 的参数与 transition ⽐较相似，如果之前了解过 transition 的童鞋应该会对 animation 的参数感觉很熟悉。

具体的参数如下：animation-name动画名称，默认为 noneanimation-duration动画的持续时间，默认为 0animation-timing-function动画的过渡类型，参数可选值类似于 transition-timing-function ，默认为 ease ，具体如下：linear：线性过渡。

相当于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)ease：平滑过渡。

相当于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)ease-in：由慢到快。

相当于贝塞尔曲线(0.42, 0, 1.0, 1.0)ease-out：由快到慢。

相当于贝塞尔曲线(0, 0, 0.58, 1.0)ease-in-out：由慢到快再到慢。

相当于贝塞尔曲线(0.42, 0, 0.58, 1.0)cubic-bezier(number, number, number, number)：特定的贝塞尔曲线类型，number 在 [0, 1] 区间内取值animation-delay动画延迟的时间animation-iteration-count动画的循环次数，其值可以是⼀个正整数，表⽰循环次数，也可以设置为 infinite ，即⽆限循环，默认为 1animation-direction动画在循环中是否反向运动，normal 为正向⽅向，alternate 为向常与反向交替运动，具体为第偶数次正向运动，第奇数次向反⽅向运动，默认为 normalanimation-play-state表⽰动画的状态，默认值为 running ，表⽰正在运动，paused 为暂停。

使用CSS实现动画效果的方法

使用CSS实现动画效果的方法

使用CSS实现动画效果的方法CSS（Cascading Style Sheets）是一种用于定义网页样式和布局的语言，它可以使网页看起来更加美观和动态。

在网页设计中，使用CSS实现动画效果是非常常见的，它可以为用户呈现更加生动的网页内容，提升用户体验。

实现动画效果的方法有多种，下面将介绍几种常用的方法：1. 使用CSS3动画：CSS3提供了丰富的动画特效，可以通过@keyframes规则来实现动画效果。

@keyframes规则定义了动画序列中的关键帧，通过控制关键帧之间的过渡效果来实现动画效果。

例如，通过定义@keyframes规则来控制图像的位移、旋转或缩放等属性，就可以实现各种动态效果。

2. 使用transition属性：transition属性可以为元素的属性值变化设置动画效果，当元素属性值发生变化时，会平滑地过渡到新的属性值。

通过设置transition属性，可以实现元素在状态变化时的平滑过渡效果，如:hover伪类、点击事件等。

transition属性可以控制属性值的过渡时长、过渡速度函数等属性，使动画效果更加自然。

3. 使用transform属性：transform属性可以对元素进行旋转、缩放、平移等变换操作，通过结合transition属性，可以实现更加复杂的动画效果。

例如，可以通过设置transform：rotate(45deg)来使元素旋转45度，设置transform：scale(1.5)来使元素放大1.5倍等。

4. 使用animation属性：animation属性可以方便地定义复杂的动画效果，通过设置animation-name、animation-duration、animation-timing-function、animation-iteration-count等属性，可以实现多样化的动画效果。

animation属性还可以结合@keyframes规则来定义动画序列，实现更加复杂的动画效果。

CSS3动画技术在Web开发中的应用

CSS3动画技术在Web开发中的应用

CSS3动画技术在Web开发中的应用随着Web技术的不断发展，CSS3动画技术越来越受到Web开发者的关注和重视。

CSS3动画技术可以通过CSS样式来实现各种动画效果，不仅可以增强Web页面的视觉效果，还可以为用户带来更好的用户体验。

本文将介绍CSS3动画技术在Web开发中的应用。

一、CSS3动画技术的基础1.1 CSS3中的动画属性CSS3中定义了一些动画属性，可以通过这些属性实现各种动画效果。

这些属性包括animation、@keyframes、transition、transform等。

以下是这些属性的功能介绍。

1.1.1 animationanimation属性用于定义一个动画，在这个动画中，可以设置动画开始后的延时时间、动画完成的时间、动画执行次数等。

例如，下面是一个动画的定义。

@media screen and (min-width: 600px) {.box {animation-name: example;animation-duration: 4s;animation-timing-function: linear;animation-delay: 2s;animation-iteration-count: infinite;animation-direction: alternate;}}在这个动画中，元素将以线性速度开始运动，并且在2秒钟后开始动画，同时动画每次结束后会反向执行。

1.1.2 @keyframes@keyframes是一种名为关键帧动画的技术。

通过定义关键帧，可以实现比animation属性更加复杂的动画效果。

例如，下面是一个定义在@keyframes中的动画。

@keyframes example {0% {background-color: red;}25% {background-color: yellow;}50% {background-color: blue;}100% {background-color: green;}}在这个动画中，元素将在四个不同的关键帧中变化颜色。

css3animation例子

css3animation例子

css3animation例子CSS3 动画是在 HTML 元素中利用 CSS3 属性实现动态效果的技术。

CSS3 动画可以创建过渡、旋转、缩放、透明度变化、背景颜色变化等效果，使网页更加生动、有趣。

下面介绍一些常用的 CSS3 动画例子。

1. 过渡效果过渡效果可以实现某个属性的变化过程，比如改变元素的颜色、大小、位置等。

代码示例：```.box {width: 100px;height: 100px;background-color: blue;transition: width 2s, height 2s, background-color 2s;}上面的示例中，当鼠标悬停在元素上时，元素的宽高和背景颜色会在 2 秒的时间内变化。

transition 属性用来设置过渡效果，后面跟随需要过渡的属性名称和时间。

2. 旋转效果旋转效果可以让元素绕着中心点进行旋转，使其更具有视觉冲击力。

.box:hover {transform: rotate(180deg);}```上面的示例中，当鼠标悬停在元素上时，元素将绕着中心点旋转 180 度。

transform 属性用来设置旋转效果，rotate() 函数用来指定旋转的角度。

3. 缩放效果缩放效果可以让元素按比例进行放大或缩小，非常适用于制作图片展示等场景。

4. 透明度效果透明度效果可以让元素的不透明度发生变化，从而让元素变得半透明或完全透明。

上面的示例中，当鼠标悬停在元素上时，元素将变成半透明状态。

opacity 属性用来设置不透明度，可以是 0 到 1 范围内的值。

5. 背景颜色效果背景颜色效果可以让元素的背景颜色发生变化，非常适用于制作导航栏或按钮的鼠标悬停效果。

上面的示例中，当鼠标悬停在元素上时，元素的背景颜色将从蓝色变成红色。

background-color 属性用来设置背景颜色。

总结以上就是几个常见的 CSS3 动画例子，当然还有很多其他的动画效果和组合方式可以实现。

第11章 CSS3 动画及响应式

第11章 CSS3 动画及响应式

•
0% {background: red; left: 0px; top: 0px;}
•
25% {background: yellow; left: 200px; top: 0px;}
•
50% {background: blue; left: 200px; top: 200px;}
•
75% {background: green; left: 0px; top: 200px;}
11.5 响应式简介（响应式布局的优缺点）
响应式布局的优点 面对不同分辨率设备灵活性强, 能够快捷解决多设备显示适应问
题，根据不同的显示器调整设计最适合用户浏览习惯的页面。 响应式布局的缺点
兼容各种设备工作量大，效率低下。代码累赘，会出现隐藏无用的元素，加载时 间加长其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果， 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。
3
规定动画何时开始。默认是 0。
3
规定动画被播放的次数。默认是 1。
3
规定动画是否在下一周期逆向地播放。默认 3 是 "normal"。
规定动画是否正在运行或暂停。默认是
3
"running"。
规定对象动画时间之外的状态。
3
11.4 CSS动画实例
• <!DOCTYPE html>
• <html>
• <head>
•
<style>
•
div {
•
width: 100px;
•
height: 100px;
•
background: red;

css3常用动画+动画库

css3常用动画+动画库

css3常⽤动画+动画库⼀、animates.cssanimate.css是来⾃dropbox的⼯程师Daniel Eden开发的⼀款CSS3的动画效果⼩类库。

包含了60多款不同类型的CSS3动画，包括：晃动，闪动，各种淡出淡出效果，如果你想快速的整合各种CSS3动画特效的话，使⽤它即可⽅便的实现。

查看演⽰：github地址：⼆、magic.css动画库查看演⽰：github地址：三、Effect.css针对不同UI的CSS3动画和过渡效果集，包含了丰富的CSS3动画和过渡效果，包括：ModaloverlaybuttonlistlistscrollCaption等等查看演⽰：四、hover.cssHover.css是⼀套使⽤CSS3动画实现的Hover特效集锦，包含了：2D变形边框过渡效果阴影过渡效果页脚翻转效果查看演⽰：github地址：五、常⽤动画/* animation */.a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;}.a-fadein,.a-fadeinT,.a-fadeinR,.a-fadeinB,.a-fadeinL,.a-bouncein,.a-bounceinT,.a-bounceinR,.a-bounceinB,.a-bounceinL,.a-rotatein,.a-rotateinLT,.a-rotateinLB,.a-rotateinRT,.a-rotateinRB,.a-flipin,.a-flipinX,.a-flipinY{-webkit-animation:1s ease-out ba .a-fadeout,.a-fadeoutT,.a-fadeoutR,.a-fadeoutB,.a-fadeoutL,.a-bounceout,.a-bounceoutT,.a-bounceoutR,.a-bounceoutB,.a-bounceoutL,.a-rotateout,.a-rotateoutLT,.a-rotateoutLB,.a-rotateoutRT,.a-rotateoutRB,.a-flipout,.a-flipoutX,.a-flipoutY/* 淡⼊ */.a-fadein{-webkit-animation-name:fadein;-moz-animation-name:fadein;-ms-animation-name:fadein;animation-name:fadein;}/* 淡⼊-从上 */.a-fadeinT{-webkit-animation-name:fadeinT;-moz-animation-name:fadeinT;-ms-animation-name:fadeinT;animation-name:fadeinT;}/* 淡⼊-从右 */.a-fadeinR{-webkit-animation-name:fadeinR;-moz-animation-name:fadeinR;-ms-animation-name:fadeinR;animation-name:fadeinR;}/* 淡⼊-从下 */.a-fadeinB{-webkit-animation-name:fadeinB;-moz-animation-name:fadeinB;-ms-animation-name:fadeinB;animation-name:fadeinB;}/* 淡⼊-从左 */.a-fadeinL{-webkit-animation-name:fadeinL;-moz-animation-name:fadeinL;-ms-animation-name:fadeinL;animation-name:fadeinL;}/* 淡出 */.a-fadeout{-webkit-animation-name:fadeout;-moz-animation-name:fadeout;-ms-animation-name:fadeout;animation-name:fadeout;}/* 淡出-向上 *//* 淡出-向下 */.a-fadeoutB{-webkit-animation-name:fadeoutB;-moz-animation-name:fadeoutB;-ms-animation-name:fadeoutB;animation-name:fadeoutB;}/* 淡出-向左 */.a-fadeoutL{-webkit-animation-name:fadeoutL;-moz-animation-name:fadeoutL;-ms-animation-name:fadeoutL;animation-name:fadeoutL;}/* 弹跳 */.a-bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-ms-animation-name:bounce;animation-name:bounce;}/* 弹⼊ */.a-bouncein{-webkit-animation-name:bouncein;-moz-animation-name:bouncein;-ms-animation-name:bouncein;animation-name:bouncein;}/* 弹⼊-从上 */.a-bounceinT{-webkit-animation-name:bounceinT;-moz-animation-name:bounceinT;-ms-animation-name:bounceinT;animation-name:bounceinT;}/* 弹⼊-从右 */.a-bounceinR{-webkit-animation-name:bounceinR;-moz-animation-name:bounceinR;-ms-animation-name:bounceinR;animation-name:bounceinR;}/* 弹⼊-从下 */.a-bounceinB{-webkit-animation-name:bounceinB;-moz-animation-name:bounceinB;-ms-animation-name:bounceinB;animation-name:bounceinB;}/* 弹⼊-从左 */.a-bounceinL{-webkit-animation-name:bounceinL;-moz-animation-name:bounceinL;-ms-animation-name:bounceinL;animation-name:bounceinL;}/* 弹出 */.a-bounceout{-webkit-animation-name:bounceout;-moz-animation-name:bounceout;-ms-animation-name:bounceout;animation-name:bounceout;}/* 弹出-向上 */.a-bounceoutT{-webkit-animation-name:bounceoutT;-moz-animation-name:bounceoutT;-ms-animation-name:bounceoutT;animation-name:bounceoutT;} /* 弹出-向右 */.a-bounceoutR{-webkit-animation-name:bounceoutR;-moz-animation-name:bounceoutR;-ms-animation-name:bounceoutR;animation-name:bounceoutR;} /* 弹出-向下 */.a-bounceoutB{-webkit-animation-name:bounceoutB;-moz-animation-name:bounceoutB;-ms-animation-name:bounceoutB;animation-name:bounceoutB;} /* 弹出-向左 */.a-bounceoutL{-webkit-animation-name:bounceoutL;-moz-animation-name:bounceoutL;-ms-animation-name:bounceoutL;animation-name:bounceoutL;} /* 转⼊ */.a-rotatein{-webkit-animation-name:rotatein;-moz-animation-name:rotatein;-ms-animation-name:rotatein;animation-name:rotatein;}/* 转⼊-从左上 */.a-rotateinLT{-webkit-animation-name:rotateinLT;-moz-animation-name:rotateinLT;-ms-animation-name:rotateinLT;animation-name:rotateinLT;}/* 转⼊-从左下 */.a-rotateinLB{-webkit-animation-name:rotateinLB;-moz-animation-name:rotateinLB;-ms-animation-name:rotateinLB;animation-name:rotateinLB;}/* 转⼊-从右上 */.a-rotateinRT{-webkit-animation-name:rotateinRT;-moz-animation-name:rotateinRT;-ms-animation-name:rotateinRT;animation-name:rotateinRT;}/* 转⼊-从右下*/.a-rotateinRB{-webkit-animation-name:rotateinRB;-moz-animation-name:rotateinRB;-ms-animation-name:rotateinRB;animation-name:rotateinRB;}/* 转出 */.a-rotateout{-webkit-animation-name:rotateout;-moz-animation-name:rotateout;-ms-animation-name:rotateout;animation-name:rotateout;}/* 转出-向左上 */.a-rotateoutLT{-webkit-animation-name:rotateoutLT;-moz-animation-name:rotateoutLT;-ms-animation-name:rotateoutLT;animation-name:rotateoutLT;} /* 转出-向左下 */.a-rotateoutLB{-webkit-animation-name:rotateoutLB;-moz-animation-name:rotateoutLB;-ms-animation-name:rotateoutLB;animation-name:rotateoutLB;} /* 转出-向右上 */.a-rotateoutRT{-webkit-animation-name:rotateoutRT;-moz-animation-name:rotateoutRT;-ms-animation-name:rotateoutRT;animation-name:rotateoutRT;} /* 转出-向右下 */.a-rotateoutRB{-webkit-animation-name:rotateoutRB;-moz-animation-name:rotateoutRB;-ms-animation-name:rotateoutRB;animation-name:rotateoutRB;} /* 翻转 */.a-flip{-webkit-animation-name:flip;-moz-animation-name:flip;-ms-animation-name:flip;animation-name:flip;}/* 翻⼊-X轴 */.a-flipinX{-webkit-animation-name:flipinX;-moz-animation-name:flipinX;-ms-animation-name:flipinX;animation-name:flipinX;}/* 翻⼊-Y轴 */.a-flipin,.a-flipinY{-webkit-animation-name:flipinY;-moz-animation-name:flipinY;-ms-animation-name:flipinY;animation-name:flipinY;}/* 翻出-X轴 */.a-flipoutX{-webkit-animation-name:flipoutX;-moz-animation-name:flipoutX;-ms-animation-name:flipoutX;animation-name:flipoutX;}/* 翻出-Y轴 */.a-flipout,.a-flipoutY{-webkit-animation-name:flipoutY;-moz-animation-name:flipoutY;-ms-animation-name:flipoutY;animation-name:flipoutY;}/* 闪烁 */.a-flash{-webkit-animation-name:flash;-moz-animation-name:flash;-ms-animation-name:flash;animation-name:flash;}/* 震颤 */.a-shake{-webkit-animation-name:shake;-moz-animation-name:shake;-ms-animation-name:shake;animation-name:shake;}/* 摇摆 */.a-swing{-webkit-animation-name:swing;-moz-animation-name:swing;-ms-animation-name:swing;animation-name:swing;}/* 摇晃 */.a-wobble{-webkit-animation-name:wobble;-moz-animation-name:wobble;-ms-animation-name:wobble;animation-name:wobble;}/* 震铃 */.a-ring{-webkit-animation-name:ring;-moz-animation-name:ring;-ms-animation-name:ring;animation-name:ring;}/* define *//* 淡⼊ */@-webkit-keyframes fadein{0%{opacity:0;}100%{opacity:1;}}@-moz-keyframes fadein{0%{opacity:0;}100%{opacity:1;}}@-ms-keyframes fadein{0%{opacity:0;}100%{opacity:1;}}@keyframes fadein{0%{opacity:0;}100%{opacity:1;}}/* 淡⼊-从上 */@-webkit-keyframes fadeinT{0%{opacity:0;-webkit-transform:translateY(-100px);}100%{opacity:1;-webkit-transform:translateY(0);}}@-moz-keyframes fadeinT{0%{opacity:0;-moz-transform:translateY(-100px);}100%{opacity:1;-moz-transform:translateY(0);}}@-ms-keyframes fadeinT{0%{opacity:0;-ms-transform:translateY(-100px);}100%{opacity:1;-ms-transform:translateY(0);}}@keyframes fadeinT{0%{opacity:0;transform:translateY(-100px);}100%{opacity:1;transform:translateY(0);}}/* 淡⼊-从右 */@-webkit-keyframes fadeinR{0%{opacity:0;-webkit-transform:translateX(100px);}100%{opacity:1;-webkit-transform:translateX(0);}}@-moz-keyframes fadeinR{0%{opacity:0;-moz-transform:translateX(100px);}100%{opacity:1;-moz-transform:translateX(0);}}@-ms-keyframes fadeinR{0%{opacity:0;-ms-transform:translateX(100px);}100%{opacity:1;-ms-transform:translateX(0);}}@keyframes fadeinR{0%{opacity:0;transform:translateX(100px);}100%{opacity:1;transform:translateX(0);}}/* 淡⼊-从下 */@-webkit-keyframes fadeinB{@-moz-keyframes fadeinB{0%{opacity:0;-moz-transform:translateY(100px);}100%{opacity:1;-moz-transform:translateY(0);}}@-ms-keyframes fadeinB{0%{opacity:0;-ms-transform:translateY(100px);}100%{opacity:1;-ms-transform:translateY(0);}}@keyframes fadeinB{0%{opacity:0;transform:translateY(100px);}100%{opacity:1;transform:translateY(0);}}/* 淡⼊-从左 */@-webkit-keyframes fadeinL{0%{opacity:0;-webkit-transform:translateX(-100px);}100%{opacity:1;-webkit-transform:translateX(0);}}@-moz-keyframes fadeinL{0%{opacity:0;-moz-transform:translateX(-100px);}100%{opacity:1;-moz-transform:translateX(0);}}@-ms-keyframes fadeinL{0%{opacity:0;-ms-transform:translateX(-100px);}100%{opacity:1;-ms-transform:translateX(0);}}@keyframes fadeinL{0%{opacity:0;transform:translateX(-100px);}100%{opacity:1;transform:translateX(0);}}/* 淡出 */@-webkit-keyframes fadeout{0%{opacity:1;}100%{opacity:0;}}@-moz-keyframes fadeout{0%{opacity:1;}100%{opacity:0;}}@-ms-keyframes fadeout{0%{opacity:1;}100%{opacity:0;}}@keyframes fadeout{0%{opacity:1;}100%{opacity:0;}}/* 淡出-向上 */@-webkit-keyframes fadeoutT{0%{opacity:1;-webkit-transform:translateY(0);}100%{opacity:0;-webkit-transform:translateY(-100px);}}@-moz-keyframes fadeoutT{0%{opacity:1;-moz-transform:translateY(0);}100%{opacity:0;-moz-transform:translateY(-100px);}}@-ms-keyframes fadeoutT{0%{opacity:1;-ms-transform:translateY(0);}100%{opacity:0;-ms-transform:translateY(-100px);}}@keyframes fadeoutT{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-100px);}}/* 淡出-向右 */@-webkit-keyframes fadeoutR{0%{opacity:1;-webkit-transform:translateX(0);}100%{opacity:0;-webkit-transform:translateX(100px);}}@-moz-keyframes fadeoutR{0%{opacity:1;-moz-transform:translateX(0);}100%{opacity:0;-moz-transform:translateX(100px);}}@-ms-keyframes fadeoutR{0%{opacity:1;-ms-transform:translateX(0);}100%{opacity:0;-ms-transform:translateX(100px);}}@keyframes fadeoutR{0%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(100px);}}/* 淡出-向下 */@-webkit-keyframes fadeoutB{0%{opacity:1;-webkit-transform:translateY(0);}100%{opacity:0;-webkit-transform:translateY(100px);}}@-moz-keyframes fadeoutB{0%{opacity:1;-moz-transform:translateY(0);}100%{opacity:0;-moz-transform:translateY(100px);}}@-ms-keyframes fadeoutB{0%{opacity:1;-ms-transform:translateY(0);}100%{opacity:0;-ms-transform:translateY(100px);}}@keyframes fadeoutB{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(100px);}}/* 淡出-向左 */@-webkit-keyframes fadeoutL{0%{opacity:1;-webkit-transform:translateX(0);}100%{opacity:0;-webkit-transform:translateX(-100px);}}@-moz-keyframes fadeoutL{0%{opacity:1;-moz-transform:translateX(0);}100%{opacity:0;-moz-transform:translateX(-100px);}}@-ms-keyframes fadeoutL{0%{opacity:1;-ms-transform:translateX(0);}100%{opacity:0;-ms-transform:translateX(-100px);}}@keyframes fadeoutL{0%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(-100px);}}/* 弹跳 */@-webkit-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);} 40%{-webkit-transform:translateY(-30px);}60%{-webkit-transform:translateY(-15px);}}40%{-ms-transform:translateY(-30px);}60%{-ms-transform:translateY(-15px);}}@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0);} 40%{transform:translateY(-30px);}60%{transform:translateY(-15px);}}/* 弹⼊ */@-webkit-keyframes bouncein{0%{opacity:0;-webkit-transform:scale(0.3);}50%{opacity:1;-webkit-transform:scale(1.05);}70%{-webkit-transform:scale(0.9);}100%{-webkit-transform:scale(1);}}@-moz-keyframes bouncein{0%{opacity:0;-moz-transform:scale(0.3);}50%{opacity:1;-moz-transform:scale(1.05);}70%{-moz-transform:scale(0.9);}100%{-moz-transform:scale(1);}}@-ms-keyframes bouncein{0%{opacity:0;-ms-transform:scale(0.3);}50%{opacity:1;-ms-transform:scale(1.05);}70%{-ms-transform:scale(0.9);}100%{-ms-transform:scale(1);}}@keyframes bouncein{0%{opacity:0;transform:scale(0.3);}50%{opacity:1;transform:scale(1.05);}70%{transform:scale(0.9);}100%{transform:scale(1);}}/* 弹⼊-从上 */@-webkit-keyframes bounceinT{0%{opacity:0;-webkit-transform:translateY(-100px);} 60%{opacity:1;-webkit-transform:translateY(30px);} 80%{-webkit-transform:translateY(-10px);}100%{-webkit-transform:translateY(0);}}@-moz-keyframes bounceinT{0%{opacity:0;-moz-transform:translateY(-100px);} 60%{opacity:1;-moz-transform:translateY(30px);} 80%{-moz-transform:translateY(-10px);}100%{-moz-transform:translateY(0);}}@-ms-keyframes bounceinT{0%{opacity:0;-ms-transform:translateY(-100px);}60%{opacity:1;-ms-transform:translateY(30px);}80%{-ms-transform:translateY(-10px);}100%{-ms-transform:translateY(0);}}@keyframes bounceinT{0%{opacity:0;transform:translateY(-100px);}60%{opacity:1;transform:translateY(30px);}80%{transform:translateY(-10px);}100%{transform:translateY(0);}}/* 弹⼊-从右 */@-webkit-keyframes bounceinR{0%{opacity:0;-webkit-transform:translateX(100px);} 60%{opacity:1;-webkit-transform:translateX(-30px);} 80%{-webkit-transform:translateX(10px);}100%{-webkit-transform:translateX(0);}}@-moz-keyframes bounceinR{0%{opacity:0;-moz-transform:translateX(100px);} 60%{opacity:1;-moz-transform:translateX(-30px);} 80%{-moz-transform:translateX(10px);}100%{-moz-transform:translateX(0);}}@-ms-keyframes bounceinR{0%{opacity:0;-ms-transform:translateX(100px);}60%{opacity:1;-ms-transform:translateX(-30px);}80%{-ms-transform:translateX(10px);}100%{-ms-transform:translateX(0);}}@keyframes bounceinR{0%{opacity:0;transform:translateX(100px);}60%{opacity:1;transform:translateX(-30px);}80%{transform:translateX(10px);}100%{transform:translateX(0);}}/* 弹⼊-从下 */@-webkit-keyframes bounceinB{0%{opacity:0;-webkit-transform:translateY(100px);} 60%{opacity:1;-webkit-transform:translateY(-30px);} 80%{-webkit-transform:translateY(10px);}100%{-webkit-transform:translateY(0);}}@-moz-keyframes bounceinB{0%{opacity:0;-moz-transform:translateY(100px);} 60%{opacity:1;-moz-transform:translateY(-30px);} 80%{-moz-transform:translateY(10px);}100%{-moz-transform:translateY(0);}}@-ms-keyframes bounceinB{0%{opacity:0;-ms-transform:translateY(100px);}60%{opacity:1;-ms-transform:translateY(-30px);}80%{-ms-transform:translateY(10px);}100%{-ms-transform:translateY(0);}}@keyframes bounceinB{0%{opacity:0;transform:translateY(100px);}60%{opacity:1;transform:translateY(-30px);}80%{transform:translateY(10px);}100%{transform:translateY(0);}}/* 弹⼊-从左 */@-webkit-keyframes bounceinL{0%{opacity:0;-webkit-transform:translateX(-100px);} 60%{opacity:1;-webkit-transform:translateX(30px);} 80%{-webkit-transform:translateX(-10px);}100%{-webkit-transform:translateX(0);}}@-moz-keyframes bounceinL{60%{opacity:1;-ms-transform:translateX(30px);}80%{-ms-transform:translateX(-10px);}100%{-ms-transform:translateX(0);}}@keyframes bounceinL{0%{opacity:0;transform:translateX(-100px);}60%{opacity:1;transform:translateX(30px);}80%{transform:translateX(-10px);}100%{transform:translateX(0);}}/* 弹出 */@-webkit-keyframes bounceout{0%{-webkit-transform:scale(1);}25%{-webkit-transform:scale(0.95);}50%{opacity:1;-webkit-transform:scale(1.1);}100%{opacity:0;-webkit-transform:scale(0.3);}}@-moz-keyframes bounceout{0%{-moz-transform:scale(1);}25%{-moz-transform:scale(0.95);}50%{opacity:1;-moz-transform:scale(1.1);}100%{opacity:0;-moz-transform:scale(0.3);}}@-ms-keyframes bounceout{0%{-ms-transform:scale(1);}25%{-ms-transform:scale(0.95);}50%{opacity:1;-ms-transform:scale(1.1);}100%{opacity:0;-ms-transform:scale(0.3);}}@keyframes bounceout{0%{transform:scale(1);}25%{transform:scale(0.95);}50%{opacity:1;transform:scale(1.1);}100%{opacity:0;transform:scale(0.3);}}/* 弹出-向上*/@-webkit-keyframes bounceoutT{0%{-webkit-transform:translateY(0);}20%{opacity:1;-webkit-transform:translateY(20px);} 100%{opacity:0;-webkit-transform:translateY(-100px);} }@-moz-keyframes bounceoutT{0%{-moz-transform:translateY(0);}20%{opacity:1;-moz-transform:translateY(20px);}100%{opacity:0;-moz-transform:translateY(-100px);} }@-ms-keyframes bounceoutT{0%{-ms-transform:translateY(0);}20%{opacity:1;-ms-transform:translateY(20px);}100%{opacity:0;-ms-transform:translateY(-100px);}}@keyframes bounceoutT{0%{transform:translateY(0);}20%{opacity:1;transform:translateY(20px);}100%{opacity:0;transform:translateY(-100px);}}/* 弹出-向右*/@-webkit-keyframes bounceoutR{0%{-webkit-transform:translateX(0);}20%{opacity:1;-webkit-transform:translateX(-20px);} 100%{opacity:0;-webkit-transform:translateX(100px);} }@-moz-keyframes bounceoutR{0%{-moz-transform:translateX(0);}20%{opacity:1;-moz-transform:translateX(-20px);}100%{opacity:0;-moz-transform:translateX(100px);} }@-ms-keyframes bounceoutR{0%{-ms-transform:translateX(0);}20%{opacity:1;-ms-transform:translateX(-20px);}100%{opacity:0;-ms-transform:translateX(100px);}}@keyframes bounceoutR{0%{transform:translateX(0);}20%{opacity:1;transform:translateX(-20px);}100%{opacity:0;transform:translateX(100px);}}/* 弹出-向下 */@-webkit-keyframes bounceoutB{0%{-webkit-transform:translateY(0);}20%{opacity:1;-webkit-transform:translateY(-20px);} 100%{opacity:0;-webkit-transform:translateY(100px);} }@-moz-keyframes bounceoutB{0%{-moz-transform:translateY(0);}20%{opacity:1;-moz-transform:translateY(-20px);}100%{opacity:0;-moz-transform:translateY(100px);} }@-ms-keyframes bounceoutB{0%{-ms-transform:translateY(0);}20%{opacity:1;-ms-transform:translateY(-20px);}100%{opacity:0;-ms-transform:translateY(100px);}}@keyframes bounceoutB{0%{transform:translateY(0);}20%{opacity:1;transform:translateY(-20px);}100%{opacity:0;transform:translateY(100px);}}/* 弹出-向左 */@-webkit-keyframes bounceoutL{0%{-webkit-transform:translateX(0);}20%{opacity:1;-webkit-transform:translateX(20px);} 100%{opacity:0;-webkit-transform:translateX(-100px);} }@-moz-keyframes bounceoutL{0%{-moz-transform:translateX(0);}20%{opacity:1;-moz-transform:translateX(20px);}100%{opacity:0;-moz-transform:translateX(-100px);} }@-ms-keyframes bounceoutL{0%{-ms-transform:translateX(0);}20%{opacity:1;-ms-transform:translateX(20px);}100%{opacity:0;-ms-transform:translateX(-100px);}}@keyframes bounceoutL{0%{transform:translateX(0);}/* 转⼊ */@-webkit-keyframes rotatein{0%{opacity:0;-webkit-transform:rotate(-200deg);}100%{opacity:1;-webkit-transform:rotate(0);}}@-moz-keyframes rotatein{0%{opacity:0;-moz-transform:rotate(-200deg);}100%{opacity:1;-moz-transform:rotate(0);}}@-ms-keyframes rotatein{0%{opacity:0;-ms-transform:rotate(-200deg);}100%{opacity:1;-ms-transform:rotate(0);}}@keyframes rotatein{0%{opacity:0;transform:rotate(-200deg);}100%{opacity:1;transform:rotate(0);}}/* 转⼊-从左上 */@-webkit-keyframes rotateinLT{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}}@-moz-keyframes rotateinLT{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}}@-ms-keyframes rotateinLT{0%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0;}100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}}@keyframes rotateinLT{0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}}/* 转⼊-从左下 */@-webkit-keyframes rotateineftB{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}}@-moz-keyframes rotateineftB{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}}@-ms-keyframes rotateineftB{0%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0;}100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}}@keyframes rotateineftB{0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}}/* 转⼊-从右上 */@-webkit-keyframes rotateinRT{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}}@-moz-keyframes rotateinRT{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}}@-ms-keyframes rotateinRT{0%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0;}100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}}@keyframes rotateinRT{0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}}/* 转⼊-从右下*/@-webkit-keyframes rotateinRB{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}}@-moz-keyframes rotateinRB{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}}@-ms-keyframes rotateinRB{0%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0;}100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}}@keyframes rotateinRB{0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}}/* 转出 */@-webkit-keyframes rotateout{0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1;}100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0;} }@-moz-keyframes rotateout{0%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1;}100%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:0;}}@-ms-keyframes rotateout{0%{-ms-transform-origin:center center;-ms-transform:rotate(0);opacity:1;}100%{-ms-transform-origin:center center;-ms-transform:rotate(200deg);opacity:0;}}@keyframes rotateout{0%{transform-origin:center center;transform:rotate(0);opacity:1;}100%{transform-origin:center center;transform:rotate(200deg);opacity:0;}}/* 转出-向左上 */@-webkit-keyframes rotateoutLT{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;} }@-moz-keyframes rotateoutLT{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;}}@-ms-keyframes rotateoutLT{0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}100%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0;}}@keyframes rotateoutLT{0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}}/* 转出-向左下 */}@-moz-keyframes rotateoutLB{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;}}@-ms-keyframes rotateoutLB{0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}100%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0;}}@keyframes rotateoutLB{0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}}/* 转出-向右上 */@-webkit-keyframes rotateoutRT{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;}}@-moz-keyframes rotateoutRT{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;}}@-ms-keyframes rotateoutRT{0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}100%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0;}}@keyframes rotateoutRT{0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}}/* 转出-向右下 */@-webkit-keyframes rotateoutBR{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;}}@-moz-keyframes rotateoutBR{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;}}@-ms-keyframes rotateoutBR{0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}100%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0;}}@keyframes rotateoutBR{0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}}/* 翻转 */@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out;}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out;}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;} 80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(0.95);-webkit-animation-timing-function:ease-in;}100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in;}}@-moz-keyframes flip{0%{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out;}40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out;}50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in;}80%{-moz-transform:perspective(400px) rotateY(360deg) scale(0.95);-moz-animation-timing-function:ease-in;}100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in;}}@-ms-keyframes flip{0%{-ms-transform:perspective(400px) rotateY(0);-ms-animation-timing-function:ease-out;}40%{-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg);-ms-animation-timing-function:ease-out;}50%{-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-animation-timing-function:ease-in;}80%{-ms-transform:perspective(400px) rotateY(360deg) scale(0.95);-ms-animation-timing-function:ease-in;}100%{-ms-transform:perspective(400px) scale(1);-ms-animation-timing-function:ease-in;}}@keyframes flip{0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out;}40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out;}50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in;}80%{transform:perspective(400px) rotateY(360deg) scale(0.95);animation-timing-function:ease-in;}100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in;}}/* 翻⼊-X轴 */@-webkit-keyframes flipinX{0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}40%{-webkit-transform:perspective(400px) rotateX(-10deg);}70%{-webkit-transform:perspective(400px) rotateX(10deg);}100%{-webkit-transform:perspective(400px) rotateX(0);opacity:1;}}@-moz-keyframes flipinX{0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}40%{-moz-transform:perspective(400px) rotateX(-10deg);}70%{-moz-transform:perspective(400px) rotateX(10deg);}100%{-moz-transform:perspective(400px) rotateX(0);opacity:1;}}@-ms-keyframes flipinX{0%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;}40%{-ms-transform:perspective(400px) rotateX(-10deg);}70%{-ms-transform:perspective(400px) rotateX(10deg);}100%{-ms-transform:perspective(400px) rotateX(0);opacity:1;}}@keyframes flipinX{0%{transform:perspective(400px) rotateX(90deg);opacity:0;}40%{transform:perspective(400px) rotateX(-10deg);}70%{transform:perspective(400px) rotateX(10deg);}100%{transform:perspective(400px) rotateX(0);opacity:1;}}/* 翻⼊-Y轴 */@-webkit-keyframes flipinY{0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}40%{-webkit-transform:perspective(400px) rotateY(-10deg);}70%{-webkit-transform:perspective(400px) rotateY(10deg);}100%{-webkit-transform:perspective(400px) rotateY(0);opacity:1;}}@-moz-keyframes flipinY{0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}40%{-moz-transform:perspective(400px) rotateY(-10deg);}70%{-moz-transform:perspective(400px) rotateY(10deg);}100%{-moz-transform:perspective(400px) rotateY(0);opacity:1;}}@-ms-keyframes flipinY{0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;}40%{-ms-transform:perspective(400px) rotateY(-10deg);}70%{-ms-transform:perspective(400px) rotateY(10deg);}100%{-ms-transform:perspective(400px) rotateY(0);opacity:1;}}。

css3动画精品PPT课件

css3动画精品PPT课件

animation@keFra bibliotekframes 动画
@-webkit-keyframes a { 0%{} 100%{}
from {} to {} }
div{ background:red;width:100px;height:100px; -webkit-animation-name : changecolor ; -webkit-animation-duration:5s ; -webkit-animation-timing-function:ease; -webkit-animation-delay :3s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction:alternate; -webkit-animation:changecolor 5s ease infinite alternate; }
transform: none|transform-functions; 旋转(rotate)，缩放(scale)，位移(translate)， etc.
/*垂直居中*/ div{ position:absolute; top:50%;left:50%; -webkit-transform:translate(-50%,-50%) } /*硬件加速*/ -webkit-transform: translateZ(0);
css3动画经验分享
综述
1 transition（过渡） 2 transform（变换） 3 animation（动画） 4 css3动画生成工具 5 css3动画库
transition（过渡）
1. transition-property

css3中动画有哪些属性？

css3中动画有哪些属性？

css3中动画有哪些属性？通过css3，我们能够创建动画，这可以在许多⽹页中取代动画图⽚、Flash 动画以及 JavaScript。

动画是使元素从⼀种样式逐渐变化为另⼀种样式的效果。

那么在css中动画属性有哪些？css3动画属性：@keyframes：规定动画。

animation：所有动画属性的简写属性，除了 animation-play-state 属性。

animation-name：规定 @keyframes 动画的名称。

animation-duration：规定动画完成⼀个周期所花费的秒或毫秒。

默认是 0。

animation-timing-function：规定动画的速度曲线。

默认是 "ease"。

animation-delay：规定动画何时开始。

默认是 0。

animation-iteration-count：规定动画被播放的次数。

默认是 1。

animation-direction：规定动画是否在下⼀周期逆向地播放。

默认是 "normal"。

animation-play-state：规定动画是否正在运⾏或暂停。

默认是 "running"。

animation-fill-mode：规定对象动画时间之外的状态。

实例：创建简单动画html代码：<div><p>Falling Text</p></div>CSS代码：@import url(/css?family=Gentium+Basic:400,700,400italic,700italic);body {background-color: #F5F5F5;color: #555;font-size: 1.1em;font-family: 'Gentium Basic', serif;}.container {margin: 50px auto;min-width: 320px;max-width: 500px;}.text {font-size: 3em;font-weight: bold;color: #0099cc;-webkit-transform-origin: left center;-ms-transform-origin: left center;transform-origin: left center;-webkit-animation: fall 4s infinite;animation: fall 4s infinite;}@-webkit-keyframes fall {from, 15% {-webkit-transform: rotate(0) translateX(0);transform: rotate(0) translateX(0);opacity: 1;-webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);}50%,60% {-webkit-transform: rotate(90deg) translateX(0);transform: rotate(90deg) translateX(0);opacity: 1;-webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);animation-timing-function: cubic-bezier(.13, .84, .82, 1);}85%,to {-webkit-transform: rotate(90deg) translateX(200px);transform: rotate(90deg) translateX(200px);opacity: 0;}}@keyframes fall {from, 15% {-webkit-transform: rotate(0) translateX(0);transform: rotate(0) translateX(0);opacity: 1;-webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57); animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);}50%,60% {-webkit-transform: rotate(90deg) translateX(0);transform: rotate(90deg) translateX(0);opacity: 1;-webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1); animation-timing-function: cubic-bezier(.13, .84, .82, 1);}85%,to {-webkit-transform: rotate(90deg) translateX(200px);transform: rotate(90deg) translateX(200px);opacity: 0;}}。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS3动画
本讲内容
• CSS3 2D与3D变形 • CSS3过度属性 • CSS3动画
2D和3D变换属性
属性 transform transform-origin transform-style perspective perspective-origin backfac换相关属性 描述 HTML元素应用 2D 或 3D 转换 允许改变元素位置。 被嵌套元素如何在 3D 空间中显示。 3D 元素的透视效果。 3D 元素的底部位置。 定义元素在不面对屏幕时是否可见。
2D和3D变换属性
属性 Matrix(n,n,n,n,n,n) Martrix3d translate translate3D translateX/Y/Z scale scale3d scaleX/Y/Z rotate rotate rotateX/Y/Z skew
作业
• 1、向网页中添加各种动画，至少有一种 动画出现？
• 2、给自己的网页添加一些过渡效果？
计算机与信息工程系
计算机与信息工程系
动画属性
动画 从一种CSS效果变换成另一中CSS效果
属性 @keyframes animation animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state
transform变换函数
描述 2D变换，使用六个值的矩阵 3D变换，用16个值的4x4矩阵 2D变换 3D变换 轴变换 2D缩放变换 3D缩放变换 轴变换 2D旋转变换 3D旋转变换 轴旋转变换 沿着轴倾斜变换
过渡属性
过渡
元素从一个状态到另一个状态的变化
Transition属性 设置元素的过渡效果 transition: property duration timing-function delay;
动画属性
@keyframes格式 @keyframes animationname {keyframes-selector {css-styles;}}
Animationname是动画的名称 keyframes-selector动画时长百分比0-100%或from-to
css-styles 一个或多个CSS样式
Transition值及单个属性
值
描述
transition-property
规定设置过渡效果的 CSS 属性的名称。
transition-duration
规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay
定义 。
动画相关属性
描述 声明动画 简写，设置所有属性，除 animation-play-state 定义 @keyframes 动画的名称 动画持续时长，0无动画，秒或毫秒 速度曲线，linear, ease, ease-in, ease-out等 延迟动画，负值为跳过时间段 动画播放次数，infinite（无限次） 反向播放，normal, alternate(轮流反向播放) 动画状态，paused, running