animation只应用在页面上已存在的DOM元素上,学这个不得不学keyframes,我们把他叫做“关键帧”。

keyframes的语法法则:

        @keyframes flash {
from{
left:;
}
50%{
left:50px;
}
to{
left:100px;
}
}

        @keyframes flash {
0%{
left:;
}
50%{
left:50px;
}
100%{
left:100px;
}
}

为了得到最佳的浏览器支持,应该始终定义 0% 和 100% 选择器!

为了兼容更多浏览器,还需要加可恶的前缀:

@-moz-keyframes flash{...}       /* Firefox */

@-webkit-keyframes flash{...}      /* Safari 和 Chrome */

@-o-keyframes flash{...}        /* Opera */

animation可设置6个属性:

animation: name duration timing-function delay iteration-count direction;

animation-name                规定需要绑定到选择器的 keyframe 名称。。
animation-duration                规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function       规定动画的速度曲线。(linear匀速、ease加速、ease-in慢到快、ease-out快到慢、ease-in-out低速开始低速结束)
animation-delay                         规定在动画开始之前的延迟。
animation-iteration-count             规定动画应该播放的次数, infinite--无限次播放
animation-direction                 规定是否应该轮流反向播放动画。 值normal--正常播放,值alternate--轮流返向播放

为了兼容更多浏览器,属性前还需要加可恶的前缀:

-moz-animation     /* Firefox */

-webkit-animation    /* Safari 和 Chrome */

-o-animation      /* Opera */

小实例:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>动画</title>
<style>
.box{width:100px;height:100px;
background: #000;
position:relative;
-webkit-animation: flash 5s ease-out;
animation: flash 5s ease-out;
}
@-webkit-keyframes flash {
0%{
top:0;
left:0;
background:red;
}
25%{
left:200px;
top:0;
background: #000;
}
50%{
top:200px; left:200px;
}
75%{
top:200px; left:0;
}
100%{
left:0;
top:0
}
}
@keyframes flash {
0%{
top:0;
left:0;
background:red;
}
25%{
left:200px;
top:0;
background: #000;
}
50%{
top:200px; left:200px;
}
75%{
top:200px; left:0;
}
100%{
left:0;
top:0
}
}
</style>
</head>
<body>
<div class="box"> </div>
</body>
</html>

注意:Internet Explorer 9 以及更早的版本不支持 animation 属性

CSS3:animation动画的更多相关文章

  1. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  2. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  3. CSS3 animation动画

    CSS3 animation动画 1.@keyframes 定义关键帧动画2.animation-name 动画名称3.animation-duration 动画时间4.animation-timin ...

  4. CSS3 animation 动画

    今天看到一个很酷的logo看了下他用的是animation 动画效果,就拿来做例子 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 animation 属 ...

  5. css3 animation(动画)笔记

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

  6. css3 animation 动画属性简介

    animation 动画属性介绍 animation 属性是一个简写属性,用于设置动画属性: 1. animation-name----规定需要绑定到选择器的 keyframe 名称. 语法:anim ...

  7. css3 animation动画事件

    当使用css3时,会遇到利用@keyframes来定义动画事件,利用以下3个事件,能够捕捉当前元素的动画: AnimationEnd //动画结束时 AnimationStart  //动画開始 An ...

  8. CSS3 animation动画,循环间的延时执行时间

    如下代码,其中的delay值为3s,但是animation按现在的规则,这个delay是指动画开始前的延时,在动画循环执行间,这个delay是不生效的. .item{ webkit-animation ...

  9. css3 animation动画使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 关于css3 Animation动画

    在介绍animation之前有必要先来了解一个东西,那就是“keyframes”,我们把他叫做“关键帧”: 在使用transition制作一个简单的transition效果时,包括了初始属性,最终属性 ...

随机推荐

  1. hive的体系架构及安装

    1,什么是Hive? Hive是能够用类SQL的方式操作HDFS里面数据一个数据仓库的框架,这个类SQL我们称之为HQL(Hive Query Language) 2,什么是数据仓库? 存放数据的地方 ...

  2. bzoj 1301 后缀数组

    比较裸的后缀数组. /************************************************************** Problem: User: BLADEVIL La ...

  3. django2.0的reverse

    导入: 官方文档地址:https://yiyibooks.cn/xx/Django_1.11.6/topics/http/urls.html from django.urls import rever ...

  4. syntax error near unexpected token `then'问题的解决

    http://blog.csdn.net/gongmin856/article/details/7690917 #!/bin/bash #if program test echo 'a:' read ...

  5. Dancing Links [Kuangbin带你飞] 模版及题解

    学习资料: http://www.cnblogs.com/grenet/p/3145800.html http://blog.csdn.net/mu399/article/details/762786 ...

  6. 关于easyui checkbox 的一些操作处理

    1.easyui在每一行加checkbox { field: 'id', title: '编号', checkbox: true } 2.easyui分页时记住前面已选的checkbox 设置easy ...

  7. CSS3制作旋转的小风车

    制作旋转小风车 一 我先搭建一个大盒子400x400px大盒子里面嵌套四个小盒子200x200px,放在一起肯定是四个排在一行,我想要的效果是上下各两个, css样式 *{ margin:0; pad ...

  8. DRF的认证与权限功能

    认证 1.全局配置 在setting.py进行配置. REST_FRAMEWORK = { 'DEFAULT_AUTHENTICATION_CLASSES': ( # 'rest_framework. ...

  9. selenium3+python自动化50-环境搭建(firefox)【转载】

    前言 有不少小伙伴在安装selenium环境后启动firefox报错,因为现在selenium升级到3.0了,跟2.0的版本还有有一点区别的. 安装环境过程中主要会遇到三个坑: 1.'geckodri ...

  10. 使用Pygame制作微信打飞机游戏PC版

    前一阵子看了一篇文章:青少年如何使用Python开始游戏开发 .看完照葫芦画瓢写了一个,觉得挺好玩儿,相当于简单学了下Pygame库.这篇文章是个12岁小孩儿写的,国外小孩儿真心NB,想我12岁的时候 ...