下面列子中的2个图片的效果。

http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html

第一个为transition属性变化效果

第二个为animation动画效果

是不是已经看出他们之间的相同与不同了吧。对的，他们都可以实现简单的动画效果，但transition变化效果当鼠标离开动画结束时，它还是会持续一段时间的动画并最终返回为元素的初始样式。animation动画效果则不是，当鼠标离开后它会之间立刻结束动画效果。

还有一点区别：transition属性变化时间点不易控制，只能见到的通过鼠标经过或者js动态追加类名去对css属性进行transition变化。animation动画则可以控制变化时间的持续长度，延迟变化等。

css3 transition属性变化与animation动画的相似性以及不同点的更多相关文章

  1. css3 transition属性

    最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...

  2. [web前端] css3 transition属性实现3d动画效果

    cp from : https://www.cnblogs.com/chrxc/p/5123375.html transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动 ...

  3. css3 transition属性实现3d动画效果

    transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动画都可以用这个属性实现,只能说这个属性是在是太强大啦,本人在学习次属性之后才知道自己对css3的认识还是偏少, ...

  4. css3——transition属性和opacity属性

    [transition-duration] 是一个css3属性,规定完成过度效果需要花费的时间(一秒或毫秒计).语法:transition-duration: time;time :    规定完成过 ...

  5. 使用CSS3各个属性实现小人的动画

    使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码: 注:chrome浏览器效果最佳,最终效果静态图: HTML代码如下: <!DOCTYPE html> <html&g ...

  6. CSS3 transition 属性过渡效果 详解

    CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡.我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添 ...

  7. 利用css transition属性实现一个带动画显隐的微信小程序部件

    我们先来看效果图 像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的,但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使(下面说明)所以我们这个时候会 ...

  8. 综合CSS3 transition、transform、animation写的一个动画导航

    打算好好写博客开始,就想把博客给装修下,近几个月一直处在准备找工作疯狂学习前端的状态.感觉博客装修要等到工作稳定下来才有时间和经历去想想要搞成什么样的了.也看过一些博主的博客导航有这种样式的,趁着回顾 ...

  9. CSS3 transition 属性

    transition是css3中新添加的特性,在W3C标准中是这样描述的:“css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态.这种状态可以在鼠标单击.获得焦 ...

随机推荐

  1. html5中manifest特性测试

    测试环境和工具   chromium  18.0.1025.151 (开发编译版 130497 Linux) Ubuntu 11.04 一.测试内容 1.A页面manifest缓存的js文件,B页面不 ...

  2. USACO 5.4 Betsy's Tour(暴力)

    水过,水过,这个程序跑7,跑5分钟左右把... /* ID: cuizhe LANG: C++ TASK: betsy */ #include <iostream> #include &l ...

  3. COJ1012 WZJ的数据结构（十二）

    今天突然想写个树套树爽一爽(1810ms) 写的是树状数组套线段树(动态开节点) #include<cstdio> #include<cctype> #include<c ...

  4. Graph database_neo4j 底层存储结构分析(6)

    3.6  Node 数据存储 neo4j 中, Node 的存储是由 NodeStore 和 ArrayPropertyStore 2中类型配合来完成的. node 的label 内容是存在Array ...

  5. CentOS 拷贝mysql数据库到新的硬盘报错了

    服务器硬盘满了,加了一块,在目录 下新建了 mkdir /mysql cp -r /var/lib/mysql/* /mysql chown -R mysql:root /mysql 更改/etc/m ...

  6. Winform窗体事件发生顺序

    Form 和Control 类公开了一组与应用程序启动和关闭相关联的事件.当Windows 窗体应用程序启动时,主窗体的启动事件按以下顺序引发: System.Windows.Forms.Contro ...

  7. 初识python面向对象

    一.初识python面向对象: class Person: #使用class关键字定义一个类 age=0 #类变量(静态变量) def eat(self,food): #定义一个方法 self.age ...

  8. 平易近人、兼容并蓄——Spark SQL 1.3.0概览

    自2013年3月面世以来,Spark SQL已经成为除Spark Core以外最大的Spark组件.除了接过Shark的接力棒,继续为Spark用户提供高性能的SQL on Hadoop解决方案之外, ...

  9. DS实验题 Dijkstra算法

    参考:Dijkstra算法 数据结构来到了图论这一章节,网络中的路由算法基本都和图论相关.于是在拿到DS的实验题的时候,决定看下久负盛名的Dijkstra算法. Dijkstra的经典应用是开放最短路 ...

  10. Redis 笔记与总结7 PHP + Redis 信息管理系统（用户信息的增删改查）

    1. PHP 连接 Redis 访问 redis 官方网站的 client 栏目:http://www.redis.io/clients#php,可以获取 redis 的 php 扩展. 其中 php ...