transition过渡 和animation 动画

要知道 transition过渡和animation动画都是实现元素运动的一种方式。区别在于: transition过渡需要人为触发,例如点击触发或者鼠标悬停触发,而animation是可以不需要人为触发。transition功能支持从一个属性值平滑到另外一个属性值,animations功能支持通过关键帧的指定来在页面产生更复杂的动画效果。


transition过渡

transition 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点,必须规定两项内容:

  • 规定您希望把效果添加到哪个 CSS 属性上
  • 规定效果的时长

如果时长未规定,则不会有过渡效果,因为默认值是 0

过滤的属性

  transition            简写属性,用于在一个属性中设置四个过渡属性。

  transition-property        规定应用过渡的 CSS 属性的名称。

  transition-duration        定义过渡效果花费的时间。默认是 0。

  transition-timing-function   规定过渡效果的时间曲线。默认是 "ease"。

  transition-delay       规定过渡效果何时开始。默认是 0。

实例

div {

  transition-property: width;

  transition-duration: 1s;

  transition-timing-function: linear;

  transition-delay: 2s;

  /* Firefox 4 */

   -moz-transition-property:width;

  -moz-transition-duration:1s;

  -moz-transition-timing-function:linear;

  -moz-transition-delay:2s;

  /* Safari 和 Chrome */

  -webkit-transition-property:width;

  -webkit-transition-duration:1s;

  -webkit-transition-timing-function:linear;

  -webkit-transition-delay:2s;

  /* Opera */

  -o-transition-property:width;

  -o-transition-duration:1s;

  -o-transition-timing-function:linear;

  -o-transition-delay:2s;

}

animation 动画

当您在 @keyframes 中创建动画时,需要把它捆绑到某个选择器,否则不会产生动画效果。

动画属性

  • 规定动画的名称
  • 规定动画的时长

您必须定义动画的名称和时长。如果忽略时长,则动画不会允许,因为默认值是 0。

animation动画属性

  animation         所有动画属性的简写属性,除了 animation-play-state 属性。

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

  animation-duration     规定动画完成一个周期所花费的秒或毫秒。默认是 0。

  animation-timing-function  规定动画的速度曲线。默认是 "ease"。

  animation-delay         规定动画何时开始。默认是 0。

  animation-iteration-count  规定动画被播放的次数。默认是 1。

  animation-direction      规定动画是否在下一周期逆向地播放。默认是 "normal"。

  animation-play-state    规定动画是否正在运行或暂停。默认是 "running"。

  animation-fill-mode      规定对象动画时间之外的状态。

实例

div
{ animation: myfirst 5s; -moz-animation: myfirst 5s;/* Firefox */ -webkit-animation: myfirst 5s;/* Safari 和 Chrome */ -o-animation: myfirst 5s;/* Opera */ } @keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } @-moz-keyframes myfirst /* Firefox */ { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } @-webkit-keyframes myfirst /* Safari 和 Chrome */ { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } @-o-keyframes myfirst /* Opera */ { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} }

实践源码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tree-table</title>
<style>
/*transition的动画*/
.t1{
width:100px;
height:100px;
transition:background-color 2s,width 2s,height 2s;
background-color:yellow;
}
.t1:hover{
width:200px;
height:200px;
transition:background-color 2s,width 2s,height 2s;
background-color:red;
} /*animation的动画*/
.a1{
width:100px;
height:100px;
background-color:yellow;
margin-top:20px;
animation:m 5s infinite;
position:relative;
} @keyframes m{
% {background: red; left:0px; top:0px;}
% {background: yellow; left:200px; top:0px;}
% {background: blue; left:200px; top:200px;}
% {background: green; left:0px; top:200px;}
% {background: red; left:0px; top:0px;}
}
</style>
</head>
<body>
<!-- transition的动画 -->
<h2>transition的动画 鼠标触发</h2>
<div class="t1"></div>
<!-- animation的动画 -->
<h2>animation的动画</h2>
<div class="a1"></div>
</body>
<script>
</script>
</html>

animations与transition的更多相关文章

  1. Parallax

    常听说牛人都是jquery插件用得很好的人. 现在有了github,英文过关的话什么好东西下不到啊,再不用去浏览那些抄来抄去骗人看广告的垃圾网站了. 扯远点,本人有严重的熊猫眼,所以用一种叫倦眼充电棒 ...

  2. angular动画知识点以及代码样例

    原文地址 https://www.jianshu.com/p/4400174072e2 大纲 1.angular动画的相关概念 2.angular动画的绑定方式 3.angular动画代码实例 1.a ...

  3. CSS3 新特性

    ~平时喜欢逛博客,看别人的学习总结和遇到的问题解决办法,恰好最近在做书签整理,翻到了之前一个前辈移动前端的总结,所以我就按他的总结模块对自己的知识进行了梳理,不过由于都是手写的,为了方便,下面的都是平 ...

  4. CSS3 笔记四(Transforms/Transition/Animations)

    CSS3 2D Transforms Methods translate() rotate() scale() skewX() skewY() matrix() 1> translate() T ...

  5. wp8.1 Study8:页面过渡和主题动画(Page transition and Theme animations)

    一.在WP8.1中是有动画(Animation)的: 页面导航(默认为旋转式Turnstile).PointerDown/up(默认是倾斜).页面旋转.MenuFlyout出现等等 二.页面过渡(Pa ...

  6. CSS 3学习——transition 过渡

    以下内容根据官方规范翻译以及自己的理解整理. 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡 ...

  7. D3中动画(transition函数)的使用

    关于transition的几个基本点: 1. transition()是针对与每个DOM element的,每个DOM element的transition并不会影响其他DOM element的tra ...

  8. Animations功能(区别于Transitions)

    CSS3实现动画: 1  Transitions:定义元素的某个属性从一个属性值平滑过渡到另一个属性值. Transitions属性的使用方法如下所示: transition: property | ...

  9. AngularJS学习--- 动画操作 (Applying Animations) ngAnimate step 12

    1.切换目录 git checkout step-12 npm start 2.效果图 这里在点击右边的缩略图时,会有一个很明显的从下向上的动画过程. 3.代码实现: step11和step12之间的 ...

随机推荐

  1. Android Studio当中的创建新方法的快捷键该如何使用?

    当有红线出现的时候,我们的代码并没有编译出错,则需要输入alt+enter则可以得到相应的神奇效果了.这个方法我竟然今天才知道,也真是丢脸了.比如说我们书写了一个新的没有创建的方法,我们直接输入alt ...

  2. git设置github的远程仓库的相关操作

        git能够把github作为远程仓库,本地可以进行推送有关变更,从而多人可以进行协作开发工作.    1  ssh-keygen -t rsa -C "your-email@163. ...

  3. gradle 参数配置监听

    说明 gradle提供了对project状态配置监听的接口回调,以方便我们来配置一些Project的配置属性,监听主要分为两大类,一种是通过project进行 回调,一种是通过gradle进行回调,作 ...

  4. Activit 5.13 工作流部署新版本后回退到上一个版本

    有时因为某些原因Activit流程部署新版本后,还没有发起流程,回退到上一个版本.操作过程: 1.查询版本更新记录,记录字段ID_值,假设值为100: select to_char(t.deploy_ ...

  5. springcloud微服务实战:Eureka+Zuul+Ribbon+Hystrix+SpringConfig

    原文地址:http://blog.csdn.net/yp090416/article/details/78017552 springcloud微服务实战:Eureka+Zuul+Ribbon+Hyst ...

  6. [日常] 小白来装机基本概念BIOS与硬盘分区

    这两天因为在linux进行测试,先是搞坏了linux的系统,然后在重装linux系统后搞坏了引导.在修复引导的过程中,搞坏了本机的win8系统,再次修复引导与重装linux后,linux可以访问了,w ...

  7. 2. Go语言—包概念

    一.包的概念 和python一样,把相同功能的代码放到一个目录,称之为包 包可以被其他包引用(若包中变量/函数被其他包调用,名需大写) main包是用来生成可执行文件,每个程序只有一个main包 包的 ...

  8. Loadrunner Controller运行不了,提示cannot create Vusers

    执行场景时显示: Loadrunner Controller cannot create Vusers.Ensure that your load generators are available a ...

  9. 《为什么说 Prometheus 是足以取代 Zabbix 的监控神器?》

    为什么说 Prometheus 是足以取代 Zabbix 的监控神器?   Kuberneteschina 致力于提供最权威的 Kubernetes 技术.案例与Meetup! ​关注他 12 人赞同 ...

  10. mysql 实现经纬度排序查找功能

    需求如下: 商品有多个门店,用户使用App时需要查找附近门店的商品,商品要进行去重分页. 思路: 1.确认mysql自带经纬度查询函数可以使用. 2.该需求需要利用分组排序,取每个商品最近门店的商品i ...