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. phpstorm xdebug 无法断点调试问题

    最近用phpstorm+xdebug调试一段php代码的时候莫名其妙的无法切入断点调试 本地用的php集成环境是UPUPW ANK V1.1.7 64Bit 选择了集成环境中php版本为7.1.x 搞 ...

  2. 一文解读DDD (转)

    从遇到问题开始 当人们要做一个软件系统时,一般总是因为遇到了什么问题,然后希望通过一个软件系统来解决. 比如,我是一家企业,然后我觉得我现在线下销售自己的产品还不够,我希望能够在线上也能销售自己的产品 ...

  3. wsl笔记

    目录 环境 修改更新源 新建用户 设置超级用户 环境变量 zsh美化终端 设zsh为默认shell 环境变量PATH 开启 ssh 远程连接 apt命令与问题 windows 和 wsl 互相访问文件 ...

  4. 『010』NoSQL

    『010』索引-Database NoSQL [001]- 点我快速打开文章[01-Redis 简单介绍] 更新中

  5. 【poj3207】Ikki's Story IV - Panda's Trick（2-sat）

    传送门 题意: 给出一个圆,圆上有\(n\)个点,依次为\(0,1,\cdots,n-1\). 现在要连接\(m\)对点,每次连接时可以直接从里面连,也可以从外面连. 最后问,连完这\(m\)对点后, ...

  6. MySQL 王者晋级之路

    3.2 Query Cache: 3.3 存储引擎 一.TokuDB的特点: – 插入性能加快20到80倍– 压缩数据减少存储空间– 数据量可扩展到几个TB– 不会产生索引碎片– 支持Hot Colu ...

  7. ShuffleNet：

    ShuffleNet算法详解 论文:ShuffleNet: An Extremely Efficient Convolutional Neural Network for Mobile Devices ...

  8. Python Beautiful Soup 4

    Beautiful Soup 是一个灵活方便的网页解析库,利用它不用编写正则表达式即可方便地提取的网页信息 官方文档:https://www.crummy.com/software/Beautiful ...

  9. mysql数据库的批量数据导入与导出，性能提升。

    少量数据批量导入:1. 先从数据库把唯一键的值查询出来,放在列表2. 将导入的数据遍历取出,看是否存在列表中,若不在,说明数据库没有.3. 定义两个空列表,一个做为插入数据,一个做为更新数据4. 步骤 ...

  10. 使用threaddump-analyzer 快速查看jvm thread 状态信息

    日常开发中,我们可以需要通过thread dump 查看线程信息,比如锁,spotify 团队提供了一个web 界面,很方便 以下是简单使用,同时添加了docker 支持 添加docker 支持 cl ...