在CSS3中也新增了一些能够对元素创建动画处理的属性。通过这些新增的属性,我们可以实现元素从一种样式变换成另一种样式时为元素添加动态效果,我们就可以取代网页中的动态图片、flash动画和JavaScript了。

CSS3中新增的动画效果的属性以及主流浏览器支持情况

属性 浏览器支持
transition IE Firefox Chrome Safari(-webkit-) Opera
@keyframes IE Firefox Chrome(-webkit-) Safari(-webkit-) Opera
animation IE Firefox Chrome(-webkit-) Safari(-webkit-) Opera

注:

  • IE9以及更早版本不支持这三个新增属性。
  • 在Safari浏览器中,需要加(-webkit-)前缀。
  • 在Chrome浏览器中,@keyframes和animation属性需要加(-webkit-)前缀。

transition属性

属性 描述 默认值
transition 简写,用于在一个属性中设置四个过渡属性。
transition-property 定义过渡效果的 CSS 属性的名称。
transition-duration 定义过渡效果所用时间。 0
transition-timing-function 定义过渡效果的时间曲线。 ease
transition-delay 定义过渡效果开始时间。 0

下面是一个简单的CSS样式

img {
width: 90px;
height: 90px;
transition-property: width, height, transform;
transition-duration: 1s, 1s, 1s;
transition-timing-function: ease-in-out, ease-in, ease-out;
transition-delay: 1s, 1s, 0s;
}
img:hover{
width: 200px;
height: 200px;
transform: rotate(90deg);
}

实现效果是当鼠标悬浮在元素(img)上时,他的宽度、高度和方向会发生变化,过渡时间都为1s,过渡方式分别为ease-in-out, ease-in和ease-out,旋转效果会立刻执行,而高宽操作会在1s后变化。

当鼠标移出元素所在范围时,它会逐渐变回原来的样式。

我们也可以transition简写来完成定义上面的样式:

img {
width: 90px;
height: 90px;
transition:width 1s ease-in-out 1s, height 1s ease-in 1s, transform 1s ease-out 0s; ;
}
img:hover{
width: 200px;
height: 200px;
transform: rotate(90deg);
}

我们还可以通过@keyframes规定来创建动画规则,通常用在较为复杂而又无需用到False动画和JavaScript的地方。

例如下面一个简单的动画效果

动画效果

部分CSS样式代码为:

#my_animate {
width: 60px;
height: 60px;
background: #060;
color: #fff;
position: relative;
font: bold 12px '微软雅黑';
padding: 20px 10px 0px 10px;
animation: my_animate 5s infinite;
}
@keyframes my_animate {
0% {transform: rotate(0deg);left:0px;}
25% {transform: rotate(90deg);left:0px;}
50% {transform: rotate(0deg);left:400px;}
55% {transform: rotate(0deg);left:400px;}
70% {transform: rotate(-30deg);left:400px;background:#ff9;color:#000;}
100% {transform: rotate(-360deg);left:0px;}
}

使用@keyframes创建动画时,需要绑定一个选择器。创建动画时至少要定义动画的名称和动画的时长,这样即可将@keyframes创建动画绑定到相应的选择器上。

若在创建动画时没有定义时长,那么就会取默认值0,就不会执行动画效果。

animation属性以及说明

属性 描述 说明
@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 定义对象动画时间之外的状态  

上面的定义的动画效果是一个周期5s,并且进行无限次的循环播放。在@keyframes中规定了动画的6各阶段的样式,最终形成一个简单的动画效果。

CSS自学笔记(14):CSS3动画效果的更多相关文章

  1. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

  2. CSS基础学习-15.CSS3 动画效果

  3. CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码

    CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...

  4. CSS3动画效果——js调用css动画属性并回调处理详解

    http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...

  5. 鼠标悬停css3动画效果

    下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  6. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  7. 第八十三节,CSS3动画效果

    CSS3动画效果 学习要点: 1.动画简介 2.属性详解 3.简写和版本 本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行. 一.动画简介     CSS3提 ...

  8. !!学习笔记:CSS3动画

    一句话就有css3动画: 2016-6-29 <style type="text/css"> h1{background:#999;} h1:hover{border- ...

  9. 35个让人惊讶的CSS3动画效果

    1. Pure CSS Coke Can 2. Colorful Clock 3. jQuery DJ Hero 4. Animated Pricing Column 5. Slick jQuery  ...

  10. Css3动画效果,彩色文字效果,超简单的loveHeart

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...

随机推荐

  1. Java三大特征之继承(二)

    在<Think in java>中有这样一句话:复用代码是Java众多引人注目的功能之一.但要想成为极具革命性的语言,仅仅能够复制代码并对加以改变是不够的,它还必须能够做更多的事情.在这句 ...

  2. MySQL的表分区(转载)

    MySQL的表分区(转载) 一.什么是表分区 通俗地讲表分区是将一大表,根据条件分割成若干个小表.mysql5.1开始支持数据表分区了. 如:某用户表的记录超过了600万条,那么就可以根据入库日期将表 ...

  3. 使用SQLiteHelper创建数据库并插入数据

    参考<疯狂android讲义>8.4节P424 1.获取SQLiteDatabase实例有2种方法,一是直接new SQLiteDatabase(),另一种使用SQLiteHelper.一 ...

  4. 今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式

    今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法 该方法通过序列化表单值,创建 URL 编码文本字符串 序列化的值可在 ...

  5. 打开本地STL文件并创建webgl使用的geometry

    需求 打开本地STL文件 一个独立基于webgl的viewer,会被别的网站重用 将打开文件的数据传输给viewer,并且在文件加载的时候显示进度条 解决方案 #1可以使用传统的html5 api来打 ...

  6. MEMS加速度计工作原理

    一般加速度计有两块芯片组成,一块是MEMS传感器,另一块是客户化的信号处理芯片. 加速度计也称惯性传感器,因为它的工作原理就是靠MEMS中可移动部分的惯性.由于中间电容板的质量很大,而且它是一种悬臂构 ...

  7. Linux进程间通信——使用命名管道

    在前一篇文章——Linux进程间通信——使用匿名管道中,我们看到了如何使用匿名管道来在进程之间传递数据,同时也看到了这个方式的一个缺陷,就是这些进程都由一个共同的祖先进程启动,这给我们在不相关的的进程 ...

  8. OSCHina技术导向:Java模板引擎velocity

    OSChina 采用 velocity 作为页面模板 Velocity是一个基于java的模板引擎(template engine).它允许任何人仅仅简单的使用模板语言(template langua ...

  9. HDU 1016 Prime Ring Problem (回溯法)

    Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  10. java MongoDB driver error infos

    DataTables warning: table id=dateTable - Ajax error. For more information about this error, please s ...