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. iOS Assertion failure in -[UITableView _classicHeightForRowAtIndexPath:]

    Assertion failure in -[UITableView _classicHeightForRowAtIndexPath:], /SourceCache/UIKit_Sim/UIKit-3 ...

  2. HDU 4652 Dice：期望dp（成环）【错位相减】

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4652 题意: 给你一个有m个面的骰子. 两种询问: (1)"0 m n": “最后 ...

  3. 分享知识-快乐自己：JAVA中的 Iterator 和 Iterable 区别

    java.lang.Iterable  java.util.Iterator  Iterator是迭代器类,而Iterable是接口. 好多类都实现了Iterable接口,这样对象就可以调用itera ...

  4. UVA 111 简单DP 但是有坑

    题目传送门:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=18201 其实是一道不算难的DP,但是搞了好久,才发现原来是题目没 ...

  5. PS 滤镜— —图像偏移

    clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Processing\PS Algorithm'); I=imread ...

  6. 高性能MySQL之【第十六章MySQL用户工具】学习记录

    接口工具:      Msql Workbench   http://www.mysql.com/products/workbench      SQLyog  http://www.webyog.c ...

  7. 【Lintcode】103.Linked List Cycle II

    题目: Given a linked list, return the node where the cycle begins. If there is no cycle, return null. ...

  8. hdu 3625 Examining the Rooms —— 第一类斯特林数

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=3625 学习斯特林数:https://blog.csdn.net/qq_33229466/article/d ...

  9. Python3解leetcode Linked List Cycle

    问题描述: Given a linked list, determine if it has a cycle in it. To represent a cycle in the given link ...

  10. hadoop之一：概念和整体架构

    什么是hadoop? Apache Hadoop是一款支持数据密集型分布式应用并以Apache 2.0许可协议发布的开源软件框架.它支持在商品硬件构建的大型集群上运行的应用程序.Hadoop是根据Go ...