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. 如何使用CodeSmith批量生成代码

    在上一篇我们已经用PowerDesigner创建好了需要的测试数据库,下面就可以开始用它完成批量代码生成的工作啦. 下面我会一步步的解释如何用CodeSmith实现预期的结果的,事先声明一下,在此只做 ...

  2. EffectiveJava(12)考虑实现Comparable接口

    考虑实现Comparable接口 compareTo方法 Comparable接口的唯一方法,允许进行简单的等同性比较,允许执行顺序比较 Comparable接口被所有值类实现.所以如果一个值类有非常 ...

  3. SpringMVC文件上传的配置

    记述一下步骤以备查. 准备工作: 需要把Jakarta Commons FileUpload及Jakarta Commons io的包放lib里. 我这边的包是: commons-fileupload ...

  4. Web用户的身份验证及WebApi权限验证流程的设计和实现(续)

    4.4 权限属性RequireAuthorizationAttribute [csharp] view plaincopy   "font-size:14px;">/// / ...

  5. hadoop:WordCount问题总结

    今天玩了一下hadoop的MapReduce,中途遇到了几个问题,在此记录一下. 1.一切按照配置完成之后,hadoop namenode format,start-all.sh启动,使用jps查看进 ...

  6. 我是怎样理解web页面的

    事实上web页面包括三部分东东 1.页面展示的元素(HTML) 2.页面元素展示的样式(CSS) 3.控制页面元素的交互(JavaScript) 不管页面多么复杂,从这三方面去看,都会得到清晰的认识的 ...

  7. MongoDB基本命令使用

    成功启动MongoDB后,再打开一个命令行窗口输入mongo,就可以进行数据库的一些操作. 输入help可以看到基本操作命令: show dbs:显示数据库列表 show collections:显示 ...

  8. linux内核参数分析

    这是原来在51cto写的,现在都转到博客园来了 1.time_wait连接数过多,需要调整内核参数 http://blog.renhao.org/2010/07/setup-linux-kernel- ...

  9. python char()和ord()

    通过help 查看相关函数的帮助文档 >>>help (chr) chr(...) chr(i) -> character Return a string of one cha ...

  10. Paxos 学习总结

    近期学习了分布式领域的重要算法Paxos,这里罗列下关键点当作总结.自己水平有限,难免存在谬误,恳请读者指正.本篇不包含Paxos的基本理论介绍.Paxos基础能够參考以下的学习资料章节. 1 Pax ...