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. UIAlertView和UIAlertController

    UIAlertView 随着苹果上次iOS 5的发布,对话框视图样式出现在了我们面前,直到现在它都没有发生过很大的变化.下面的代码片段展示了如何初始化和显示一个带有“取消”和“好的”按钮的对话框视图. ...

  2. gitlab设置项目组成员权限

    你敢相信这是个码农? setting菜单的“Members”功能页: 该页面展示了当前Project的成员列表,以及每个成员对应的权限角色,Owner/Master/Developer 注意到该页面顶 ...

  3. [20191002]函数dump的bug.txt

    [20191002]函数dump的bug.txt --//前几天写raw转化oracle number脚本,在使用函数dump时遇到一些问题,做一个记录:--//oracle number 0 编码 ...

  4. nginx在centos下的安装

    第一步:打开浏览器下载,再上传到centOS系统中 http://nginx.org/download/ 或者在 centOS系统输入: wget http://nginx.org/download/ ...

  5. 学习：SpringCloud(一)

    微服务: 微服务是一种架构模式或者一种架构风格,提倡将单一应用程序划分成一组小的服务==独立部署==,服务之间相互配合.相互协调,每个服务运行于自己的==进程==中. 服务与服务间采用轻量级通讯,如H ...

  6. Ubuntu 镜像制作 官方教程

    rufus工具下载:下载链接 官方教程:官方教程链接 软件界面预览: 资源来源自网络,如果对您有帮助,请点击推荐~. 我尝试了这个方法可以用.电脑重启时,选择从U盘启动,就能安装系统. 参考链接: h ...

  7. Linux—网络通讯管理命令

    一.ping命令 . ping 主机名 . ping 域名 [root@localhost ~]# ping www.baidu.com . ping IP地址 [root@localhost ~]# ...

  8. luoguP5094 [USACO04OPEN]MooFest 狂欢节

    get 到的 这种需要求 含 max 的式子,枚举最大值的方法非常普遍. 类似的,还有含 min , gcd 的式子,枚举他们也很普遍 主要难点 我们首先想到,先按 v 从小到大排序,因为这样既可以简 ...

  9. （Apache服务）个人用户主页功能

    1.开启个人用户主页功能 (1)输入命令“vi /etc/httpd/conf.d/userdir.conf” (2)将第17行UserDir disabled前加一个#    将第24行UserDi ...

  10. Spring熔断

    Hystrix不再维护,使用Resilience4j来代替.