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. c语言学习的第13天1

    #include <stdio.h> int main(void) { int a[5]={1,2,3,4,5}; printf("%#x, %#x\n",a,& ...

  2. SecureCRT连接Ubuntu失败(远程系统拒绝访问)

    SecureCRT连接Ubuntu失败,长时间的重新连接,连接不了. Ubuntu默认未安装ssh远程加密连接服务. 使用命令,安装即可. sudo apt-get install openssh-s ...

  3. codeforces 658C C. Bear and Forgotten Tree 3(tree+乱搞)

    题目链接: C. Bear and Forgotten Tree 3 time limit per test 2 seconds memory limit per test 256 megabytes ...

  4. ACM学习历程—HDU5396 Expression（递推 && 计数）

    Problem Description Teacher Mai has n numbers a1,a2,⋯,an and n−1 operators("+", "-&qu ...

  5. vue之axios请求数据本地json

    写给自己的话:静态的json文件要记得放在static文件夹下,想打自己 1.下载插件 npm install axios --save 2.在main.js下引用axios import axios ...

  6. Data Guard 异构平台支持手册

    背景 最简单的DG 环境是同数据库版本,同操作系统平台. 但有时需要在异构平台上来部署DG 环境,比如异构下使用DG 来进行数据迁移,从而降低停机时间和风险等等. 1. 查看主备库的Platform ...

  7. HDU1828：Picture

    浅谈树状数组与线段树:https://www.cnblogs.com/AKMer/p/9946944.html 题目传送门:http://acm.hdu.edu.cn/showproblem.php? ...

  8. css3 实现运动动画 圆与椭圆

    圆: html <div class="demo4"><div></div></div> css .demo4{ width: 20 ...

  9. CS231n 2016 通关 第五、六章 Dropout 作业

    Dropout的作用: cell  1 - cell 2 依旧 cell 3 Dropout层的前向传播 核心代码: train 时: if mode == 'train': ############ ...

  10. 在Windows环境中学习Linux

    如何在Windows环境下学习Linux?方法如下: 方法一: 下载Cygwin,Cygwin是一个在windows平台上运行的类UNIX模拟环境,网上有很多安装教程,这里不多说. 方法二: 下载一个 ...