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. Docker安装并运行mysql5.6数据库

    1.在/home目录下新建mysql目录 mysql目录中新建三个目录:conf目录.logs目录.data目录,建这些目录的目的是用来挂载docker中的mysql下的目录的. 结果如下: 1.1. ...

  2. python中动态创建类

    class Foo(Bar): pass Foo中有__metaclass__这个属性吗?如果是,Python会在内存中通过__metaclass__创建一个名字为Foo的类对象(我说的是类对象,请紧 ...

  3. 为什么 Redis 为什么如此受欢迎

    现在大多数开发人员都会听说过 Redis.Redis 是目前市场上最好的开源内存 NoSQL 数据库之一.它为前端以及后端服务(如键值查找,队列,哈希等)提供了非常多的帮助. 一.什么是 Redis? ...

  4. 设备树（device tree）学习笔记【转】

    转自:https://www.cnblogs.com/pengdonglin137/p/4495056.html 阅读目录(Content) 1.反编译设备树 2.分析工具fdtdump 3.Linu ...

  5. 4-9 Panadas与sklearn结合实例

      1.显示百分比的柱状图 In [1]: import pandas as pd import numpy as np import matplotlib.pyplot as plt %matplo ...

  6. android appium微信等自动化的那些坑儿

    1.下载appium自动化安装环境: appium客户端 python语言支持 android studio(包含android sdk和adb) java开发环境 2.微信x5内核调试(网上有详细配 ...

  7. python名片 项目

    ---恢复内容开始--- 综合应用 —— 名片管理系统 目标 综合应用已经学习过的知识点: 变量 流程控制 函数 模块 开发 名片管理系统 系统需求 程序启动,显示名片管理系统欢迎界面,并显示功能菜单 ...

  8. guppy

    1.下载 wget https://mirror.oxfordnanoportal.com/software/analysis/ont-guppy-cpu_3.4.1_linux64.tar.gz

  9. 第一次作业--Numpy练习

    1.创建一个边界值为1而内部都是0的数组,图例如下:[提示:]解此题可以先把所有值都设置为1,这是大正方形:其次,把边界除外小正方形全部设置为0.本题用到numpy的切片原理.多维数组同样遵循x[st ...

  10. Web前端开发框架大全-详述

    可以说,前端技术的发展是互联网自身发展的一个缩影! 前端技术的发展经历了web1.0时代,即网页只能展示信息,几乎没有交互可言: web2.0时代,web2.0不再是单维的,逐渐发展为双向交流,另一特 ...