animation是CSS3的动画属性，可以设置以下六种属性。

transition是CSS3的过度属性，可以设置以下四种属性。

从属性上分析，animation可以设定循环次数。

其次，两者的触发条件不同，transition通常和hover等事件配合使用，由事件触发。animation则和gif动态图差不多，立即播放。

所以：

1. 如果要灵活定制多个帧以及循环，用animation.

2. 如果要简单的from to 效果，用transition.

3. 如果要使用js灵活设定动画属性，用transition.

CSS3 animaion 和 transition 比较的更多相关文章

  1. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  2. css3动画（transition）属性探讨

    在webapp引用开发中经常会用到css3动画效果,下面我们就一起探讨一下这个属性的使用. 在哪里定义动画效果? css3动画一般通过鼠标事件或者说状态定义动画,通常我们可以用CSS中伪类和js中的鼠 ...

  3. CSS3(2)--- 过渡(transition)

    CSS3(2)--- 过渡(transition) 一.概念 1.什么是过渡 通俗理解 是从一个状态 渐渐的过渡到 另外一个状态. 比如一个盒子原先宽度为100px,当鼠标点击时盒子的宽度变成200p ...

  4. 总结CSS3新特性(Transition篇)

    CSS 过渡(transition), 是 CSS3 规范的一部分, 用来控制 CSS 属性的变化速率. 可以让属性的变化过程持续一段时间,而不是立即生效.比如,将元素的颜色从白色改为黑色,通常这个改 ...

  5. css3 中的transition和transform

    我以前始终都把他搞反,或者是混淆.现在可以稍微小结下. Transition:CSS3中处理动画的一个样式:只涉及动画起始和终止两个状态.如果涉及到一个动画的各个时间或者状态,那就必须要用到的另外一个 ...

  6. CSS3中的Transition属性详解

    w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...

  7. CSS3中的Transition属性详解(贝赛尔曲线)

    transition语法: transition : [<'transition-property'> || <'transition-duration'> || <'t ...

  8. CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)

    刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现.所以请大家明白,特别是We ...

  9. CSS3之过渡Transition

    CSS3中的过渡Transition有四个中心属性:transition-property.transition-duration.transition-delay和transition-timing ...

随机推荐

  1. 第三十二篇 -- CreateFile、ReadFile、WriteFile

    一.CreateFile 这是一个多功能的函数,可打开或创建文件或者I/O设备,并返回可访问的句柄:控制台,通信资源,目录(只读打开),磁盘驱动器,文件,邮槽,管道. 函数原型: HANDLE WIN ...

  2. 九九乘法表（Java版）

    3.九九乘法表 //九九乘法表 public class MultiplicationTables { public static void main(String[] args){ for (int ...

  3. springmvc学习指南 之---第27篇 spring如何实现servlet3.0无web.xml 配置servlet对象的

    writedby 张艳涛 基于web.xml配置,有人说麻烦,tomcat给按照servlet3.0,实现了基于注解@WebServlet,有人说springmvc的springmvc.xml配置麻烦 ...

  4. tomcat与springmvc 结合 之---第18篇 StandContext容器和SpringMVC的监听器的模型

    writedby张艳涛 如何使用tomcat的监听器 public class BootStrap_ex06 { public static void main(String[] args) { Ht ...

  5. 【阅读笔记】Java核心技术卷一 #2.Chapter4

    4 对象和类 4.1 面向对象程序设计概述(略) 4.2 使用预定义类 java.time.LocalDate static LocalDate now(); static LocalDate of( ...

  6. koa踩坑记录

    1.koa热更新用nodemon 2.koa中暂不支持import/export 3.只发送options请求,没有后续请求   当ctx.set('Access-Control-Allow-Cred ...

  7. jquery点击空白处事件

    $(document).live('click',function(){       $('.emails').hide();   }); 此代码为点击空白处,'emails',标签隐藏.

  8. 🔥 LeetCode 热题 HOT 100（81-90）

    337. 打家劫舍 III 思路:后序遍历 + 动态规划 推荐题解:树形 dp 入门问题(理解「无后效性」和「后序遍历」) /** * Definition for a binary tree nod ...

  9. 大数据学习（23）—— ZooKeeper实战

    本片介绍两方面内容,一方面是命令行操作,另一方面是Java调用API. ZooKeeper集群环境的搭建在Hadoop集群搭建里已经讲过了,这里不再赘述,本篇内容基于zk3.5.8. 这里补充一点,除 ...

  10. Linux命令（九）之安装mysql

    .personSunflowerP { background: rgba(51, 153, 0, 0.66); border-bottom: 1px solid rgba(0, 102, 0, 1); ...