transform是一个属性,本质跟width,height是一样的,加上transform也就是为类添加一个变换属性。

transition是一个属性。它是用来控制过渡效果的,由于用transform能够添加变换效果。而那个变换是瞬间突变。假设想让这个变化是平滑的、过渡型的。则要用transition来控制。设定要控制的属性和过渡的时间就可以。

animation是动画效果,要先用@keyframes定义一个动画过程,然后在类中用animation的各个參数制定想要加入的动画名称。执行时间。执行次数等等。

/* Float using transition */
.float {
    transition-property: transform;
    transition-duration: .3s;
}
.float:hover {
    transform: translateY(-5px);
}


/* Pulse using animation*/
@keyframes pulse {
    25% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(.9);
    }
}
.pulse { } 
.pulse:hover {
    animation-name: pulse;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

CSS3中transform,transition和animation的简单介绍和使用方法演示样例的更多相关文章

  1. 最简单的视音频播放演示样例5:OpenGL播放RGB/YUV

    ===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频 ...

  2. 最简单的视音频播放演示样例4:Direct3D播放RGB(通过Texture)

    ===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频 ...

  3. 最简单的视音频播放演示样例8:DirectSound播放PCM

    ===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频 ...

  4. JAVA简单Swing图形界面应用演示样例

    JAVA简单Swing图形界面应用演示样例 package org.rui.hello; import javax.swing.JFrame; /** * 简单的swing窗体 * @author l ...

  5. 最简单的视音频播放演示样例3:Direct3D播放YUV,RGB(通过Surface)

    ===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频 ...

  6. 最简单的视音频播放演示样例7:SDL2播放RGB/YUV

    ===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频 ...

  7. Mockito的简单使用方法演示样例

    Mockito是一个流行的Mocking框架.它使用起来简单,学习成本非常低.并且具有非常简洁的API,測试代码的可读性非常高.因此它十分受欢迎,用 户群越来越多.非常多的开源的软件也选择了Mocki ...

  8. Nginx 简单的负载均衡配置演示样例

    近期在做开放查询应用的时候,因为数据两天特别多,两千多万条呢,用户訪问需求也比較大,所以就用nginx做了 负载均衡,以下是改动之后的相关内容. http://www.cnblogs.com/xiao ...

  9. 在.Net MVC结构API接口中推断http头信息实现公共的权限验证过滤器演示样例

    //control   action public class TestController : ApiController { [MyAuthFilter] public string test(s ...

随机推荐

  1. jsp中URL传递中文參数的处理

    在页面的url中使用encodeURI(encodeURI(中文)).对中文进行编码.并在server的java程序中使用URLDecoder.decode(中文, "UTF-8" ...

  2. Vue-router(vue2.0)用法示例

    一.新建3个组件 1./src/components/post.vue <template> <div> hello world! this is POST! </div ...

  3. ionic准备之angular基础——$watch,$apply,$timeout方法(5)

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

  4. Ubuntu16.04安装QQ

    说明:一开始,我在Ubuntu 16.04下安装的QQ版本是Wineqq2013SP6-20140102-Longene,但后来发现这个版本QQ在linux下问题很多,比如不能用键盘输入密码,QQ表情 ...

  5. 安装pydot及importError解决办法

    安装pydot: 需要先安装graphviz和pyparsing. 安装pydot过程曾出现“import error” 错误,主要是版本不兼容的问题.之后自己apt-get upgrade了一下,问 ...

  6. python的requests初步使用

    转自:http://my.oschina.net/yangyanxing/blog/280029 早就听说requests的库的强大,只是还没有接触,今天接触了一下,发现以前使用urllib,urll ...

  7. JDK自带的定时任务

    import java.util.TimerTask; /** * 实现定时任务 * */ public class MyTimerTask extends TimerTask { @Override ...

  8. 从零開始学Swift之Hello World进化版

    上节课,也就是昨晚啦,我们学习到从零開始学Swift之Hello World.那一节仅仅有一句代码,大家会认为不够过瘾. 那么这节课,就给大家来多点瘾货吧! 先上图! //var 代表变量的类型, s ...

  9. Spring Boot内嵌Tomcat session超时问题

    最近让Spring Boot内嵌Tomcat的session超时问题给坑了一把. 在应用中需要设置session超时时间,然后就习惯的在application.properties配置文件中设置如下, ...

  10. 交换两个变量的值不使用第三个变量(Java)

    关于这个问题网上有好多答案,最近有人说这是个奇葩问题 个人测试了一把,如果是普通的数字的话,基本上没有问题 public static void main(String[] args) { int a ...