HTML

<a href="#" title="">test</a>

CSS

a {display:block; width:200px; line-height:2em; border: 1px solid #000; text-align: center;}

a:hover {width:300px; background-color: #f00; transition-duration:0.2s;}

只要在:hover里写 transition-duration 就可以了

transition动画最简使用方式的更多相关文章

  1. 移动端 transition动画函数的封装（仿Zepto）以及 requestAnimationFrame动画函数封装（仿jQuery）

    移动端 css3 transition 动画 ,requestAnimationFrame 动画  对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...

  2. CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画

    ---恢复内容开始--- 一.CSS3新增选择器 1.nth-chlid(n)用法 selector:nth-chlid(n)指找到第n个子元素并且该元素为selector标签 <!DOCTYP ...

  3. Swift: 是用Custom Segue还是用Transition动画

    用一个很简单的场景做为例子:在storyboard上,你有用UINavigationController串起来两个UIViewController.这两个controller之间要互相跳转,A-> ...

  4. 实现activity跳转动画的若干种方式

    第一种: (使用overridePendingTransition方法实现Activity跳转动画) 在Activity中代码如下 /** * 点击按钮实现跳转逻辑 */ button1.setOnC ...

  5. CSS3的transition动画功能

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

  6. css3 Transition动画执行时有可能会出现闪烁的bug

    css3 Transition动画执行时有可能会出现闪烁的bug,一般出现在开始的时候. 解决方法: 1.-webkit-backface-visibility: hidden; 2.-webkit- ...

  7. 解决transition动画与display冲突的几种方法

    如demo(如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translate”按钮后,蓝色区域透明度变为0,然后隐 ...

  8. appendChild与Transition动画

    在createElement之后,直接把这个div append到body中,是不会触发css3 transition动画的 必须要让浏览器计算div的css属性后,然后再设置div的style,才会 ...

  9. css3动画的两种方式transition和@keyframs

随机推荐

  1. Tomcat部署java项目java.lang.OutOfMemoryError异常解决方法

    java.lang.OutOfMemoryError异常解决方法 Window系统环境下,在catalina.bat文件第一行添加以下内容 set JAVA_OPTS=-Xms512m -Xmx512 ...

  2. poj1328 Radar Installation —— 贪心

    题目链接:http://poj.org/problem?id=1328 题解:区间选点类的题目,求用最少的点以使得每个范围都有点存在.以每个点为圆心,r0为半径,作圆.在x轴上的弦即为雷达可放置的范围 ...

  3. html5手机网站需要加的那些meta标签，手机网站自适应

    的html5相关meta和标签    a.<!-- 强制让文档与设备的宽度保持1:1 -->    <meta name="viewport" content=& ...

  4. HDU 4405 Aeroplane chess：期望dp

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4405 题意: 你在下简化版飞行棋... 棋盘为一个线段,长度为n. 上面有m对传送门,可以直接将你从a ...

  5. 存储过程之rowtype 使用

    CREATE OR REPLACE PROCEDURE "DYLYLQX_SC_BA_1" (YWID IN VARCHAR2, FLAG OUT VARCHAR2) IS V_R ...

  6. 一些flag

    连续两道组合计数题 WA 在杨辉三角上,TM 我要是联赛杨辉三角萎了就剁*. 又连续两道题萎在数组越界上,TM 我要是联赛数组越界就吃*.

  7. 勤于思考：jQuery Validation 在IE7（兼容模式）下出现“找不到成员”的脚本错误

    今天在调试IE10下使用IE6判断脚本出现错误,处理后说IE7也不行,调试后则会出现以下错误: SCRIPT3: 找不到成员. jquery171.js, 行2582 字符4 其实开始我认为是jque ...

  8. Unity 摄像机旋转初探

    接触打飞机的游戏时都会碰见把摄像机绕 x 轴顺时针旋转 90°形成俯瞰的视角的去看飞船.也没有多想,就感觉是坐标系绕 x 轴旋转 90°完事了.但是昨天用手比划发一下发现不对.我就想这样的话绕 x 轴 ...

  9. HTml js 生成图片

    <script type="text/javascript"> function $(id) { return document.getElementById(id); ...

  10. bzoj 1049: 数字序列 dp

    题目大意: 给定一个长度为n的整数序列.在改变的数最小的和改变的幅度最小的前提下把它变成一个单调严格上升的序列.求改变的最小的数和这个幅度. 题解: (貌似以前考试考过这道题) 其实这道题就是两道题拼 ...