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. Python用openpyxl读写Excel

    openpyxl是一个用于读写Excel 2010 xlsx文件的python库.openpyxl官方文档:https://openpyxl.readthedocs.io/en/stable/ 一.安 ...

  2. 查找树ADT--二叉查找树

    二叉树的一个重要应用是它们在查找中的使用. 二叉查找树的性质:对于树中的每个节点X,它的左子树中所有项的值小于X中的项,而它的右子树中所有项的值大于X中的项.这意味着该树所有的元素可以用某种一致的方式 ...

  3. Shell命令-用户用户组管理之passwd、chage

    文件及内容处理 - passwd.chage 1. passwd:修改用户密码 passwd命令的功能说明 passwd命令用来更改使用者的密码 passwd命令的语法格式 passwd [-k] [ ...

  4. client-go集群外认证k8s

    除了认证外,还判断了操作系统. 且根据不同的系统,生成不同的文件. 在集群外认证时,使用的是k8s官方的方式, 而不是第三方库. package main import ( "flag&qu ...

  5. 15.Java基础_初探对象

    package pack1; public class Phone { //成员变量 String brand; int price; //成员方法 public void call(){ Syste ...

  6. Xmind最新的安装与破解教程

    参考链接:https://www.jianshu.com/p/e1693dad4dde Tips: hosts文件的默认位置:C:\Windows\System32\drivers\etc

  7. SpringBoot application.properties配置参数详情

    multipart multipart.enabled 开启上传支持(默认:true) multipart.file-size-threshold: 大于该值的文件会被写到磁盘上 multipart. ...

  8. MySQL SQL DML (数据操作语言)

    包括 SELECT, UPDATE, DELETE, INSERT SELECT 从数据库表中获取数据 用法 SELECT name FROM students; SELECT name,age FR ...

  9. Django CSRF

    CSRF(Cross-site request forgery)跨站请求伪造 django为用户实现防止跨站请求伪造的功能,通过中间件 django.middleware.csrf.CsrfViewM ...

  10. 【BZOJ4518】[SDOI2016] 征途（重拾斜率优化DP）

    点此看题面 大致题意: 让你把一个长度为\(n\)的序列划分成\(m\)块,求每块数总和的最小方差乘\(m^2\)的值. 转化方差 首先方差显然是一个比较复杂的东西,需要进行一定转化. 设\(p_i\ ...