1.transition

在CSS3中，可以通过transition为元素从一种样式变换为另外一种样式的过程添加效果。

transition为简写属性，用于在一个属性中设置四个过渡属性，分别是：

transition-property：应用过渡的CSS属性的名称，如width，background-color等；

transition-duration：过渡过程所花的时间，如不指定，默认为0；

transition-timing-function：过渡效果的时间曲线，即动画速度随时间的变化而变化，默认为ease（先慢再变快再以慢速结束）；

transition-delay：规定过渡效果延迟多少开始，默认为0；

eg：

  1. <style>
  2. div{
  3.     width:50px;
  4.     heigth:50px;
  5.     background-color:yellow;
  6.     transition:width 2s;
  7. }
  8. div:hover{
  9.     width:100px;
  10. }
  11. </style>
  12.  
  13. <div></div>

上面的例子中，当鼠标移到该元素上面时，元素的宽度width会在2s内从50px增加为100px；

另外transition-property的值也可以设定为transform，这样一来就可以实现更多的动画效果

eg：

  1. <style>
  2. div
  3. {
  4. width:100px;
  5. height:100px;
  6. background:yellow;
  7. transition:transform 2s;
  8. }
  9.  
  10. div:hover
  11. {
  12. transform:translate(30px,40px);
  13. }
  14. </style>
  15.  
  16. <div></div>

上面的例子中 ，当鼠标移到该元素上面时，元素两秒内向左向下移动30px、40px；

如果需要向多个样式添加过渡效果，应该使用逗号隔开

eg：

  1. div{
  2.     transition:width 2s,transform 3s,height 4s;
  3. }

2.animation

animation  包含六个属性，分别是：

animation-name：规定@keyframes动画的名称；

animation-duration：规定完成一个动画周期所花的时间；

animation-timing-function：规定动画速度的变化曲线，默认为ease；

animation-delay：规定动画延迟开始的时间，默认为0；

animation-iteration-count：规定动画被播放的次数（周期），默认为1，infinite为无限次播放；

animation-direction：规定动画是否在下一周期逆序播放，默认为normal，动画正常播放，设置为alternate时，动画在1，3，5等奇数次时正常播放，在2，4，6等偶数次逆序播放；

除此6个属性外，还有两个不包含在animation简写属性内的。

animation-play-state：规定动画是运行还是暂停的，running表示运行中，paused表示暂停中，一般在JavaScript中使用，如此便可以在播放过程中暂停动画。

animation-fill-mode：规定动画在播放前或播放后，动画效果是否可见。属性值默认为none；设置为forwards时，当动画完成时，保持最后的效果（即保持在最后的关键帧中设置的效果），设置为backwards时，在animation-delay设置的那段时间内，在动画正式开始时，应用在最开始的关键帧中定义的效果

和animation密切相关的，还有上面提到的@keyframes，@keyframes用于创建动画，通过在@keyframes中定义CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。

eg：

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <style>
  6.         * {
  7.             margin: 0;
  8.             padding: 0;
  9.         }
  10.         #test {
  11.             width: 100px;
  12.             height: 100px;
  13.             background-color: blue;
  14.             animation: myAnimation 3s;
  15.         }
  16.         @keyframes myAnimation {
  17.             from {
  18.                 width: 100px;
  19.             }
  20.             to {
  21.                 width: 300px;
  22.             }
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div id="test"></div>
  28. </body>
  29. </html>

另外，animation不同于transition的地方在于，animation可以定义关键帧，可以使动画在多个状态间变换

eg：

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <style>
  6.         * {
  7.             margin: 0;
  8.             padding: 0;
  9.         }
  10.         #test {
  11.             width: 100px;
  12.             height: 100px;
  13.             background-color: blue;
  14.             animation: myAnimation 3s;
  15.         }
  16.         @keyframes myAnimation {
  17.             0% {
  18.                 width: 100px;
  19.             }
  20.             30% {
  21.                 width: 200px;
  22.             }
  23.             60% {
  24.                 width: 250px;
  25.             }
  26.             100% {
  27.                 width: 300px;
  28.             }
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <div id="test"></div>
  34. </body>
  35. </html>

CSS中的动画的更多相关文章

  1. Css中的变形及过渡动画

    在css3的标准中新增加了变形样式,这些样式使得网页中各元素的位置形状的变换变得更加容易.其语法如下: transform:none | <transform-function>+ 其中对 ...

  2. CSS中的一下小技巧2之CSS3动画勾选运用

    使用CSS3实现动画勾选 相信大家在项目中会经常遇到这种需求:勾选框.现在用CSS3来实现一个动画勾选,只需要一个标签即可完成: 这次需要用到CSS中伪类 after,这个小技巧也是很容易忘记的,所以 ...

  3. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  4. css中animation和@keyframes 动画

    Animation 使用简写属性,将动画与 div 元素绑定: div { animation:mymove 5s infinite; -webkit-animation:mymove 5s infi ...

  5. CSS 技巧一则 -- 在 CSS 中使用三角函数绘制曲线图形及展示动画

    最近一直在使用 css-doodle 实现一些 CSS 效果. css-doodle 是一个基于 Web-Component 的库.允许我们快速的创建基于 CSS Grid 布局的页面,以实现各种 C ...

  6. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  7. requestAnimationFrame，Web中写动画的另一种选择

    HTML5/CSS3时代,我们要在web里做动画选择其实已经很多了: 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition; 你还可以用通过在canv ...

  8. CSS3中的动画功能（一）

    css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...

  9. CSS 和 JS 动画哪个更快

    基于Javascript的动画暗中同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢? 本文逐一遍览了基于Javas ...

随机推荐

  1. atom 常用配置

    基本配置 setting 位于 File -> setting 显示HTML标签闭合的竖线 Setting -> Editor Setting -> 勾选 Show Indent G ...

  2. 微软发布SQL Server on Linux

    本文参考并翻译自:微软云计算与企业执行副总裁Scott Guthrie的博客. 过去的一年,不管是对于微软的数据业务,还是整个行业,都是令人惊喜的一年.在周四刚于纽约举行的Data Driven活动中 ...

  3. SQL Server 使用 OUTPUT做数据操作记录

    OUTPUT 子句 可以在数据进行增删改的时候,可以返回受影响的行.先准备一张表 create table #t ( id int identity primary key ,name ) ) go ...

  4. wcf 访问控制

    public class PasswordDigestChannelFactory<TPortTypeClient, TPlugin> where TPortTypeClient : Cl ...

  5. Eigen参考资料

    Getting started https://eigen.tuxfamily.org/dox/GettingStarted.html long tutorial https://eigen.tuxf ...

  6. Hibernate初探之一对多映射 及 myeclipse自动生成hibernate文件方法

    实现单向一对多: 1)在one方的实体中添加保存many方的集合 2)在one方的配置文件中添加<one-to-many>配置 实现单向多对一: 1)在many方的实体中添加one方的引用 ...

  7. NPM cache相关

    今天下午把package.lock.json用别人的替换了,然后编译一堆报错,这个问题弄了一下午. 总结一下经验: 1.关于npm cache NPM会把所有下载的包保存,放在用户文件夹下面,在我的w ...

  8. 管理kafka

    一.主题操作使用kafka-topics.sh工具可以执行主题的大部分操作(配置变更部分已被启用并被移动到kafka-configs.sh工具中).我们可以用它创建.修改.删除和查看集群里的主题,要使 ...

  9. POJ-1284 Primitive Roots---原根&欧拉函数

    题目链接: https://cn.vjudge.net/problem/POJ-1284 题目大意: 就是给出一个奇素数,求出他的原根的个数. 解题思路: 由于是m是奇素数,m的欧拉函数值为m - 1 ...

  10. Android（java）学习笔记207：Android下的属性动画（Property Animation）

    1. 属性动画(Property Animation)引入: 在手机上去实现一些动画效果算是件比较炫酷的事情,因此Android系统在一开始的时候就给我们提供了两种实现动画效果的方式,逐帧动画(fra ...