animations与transition
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的更多相关文章
- Parallax
常听说牛人都是jquery插件用得很好的人. 现在有了github,英文过关的话什么好东西下不到啊,再不用去浏览那些抄来抄去骗人看广告的垃圾网站了. 扯远点,本人有严重的熊猫眼,所以用一种叫倦眼充电棒 ...
- angular动画知识点以及代码样例
原文地址 https://www.jianshu.com/p/4400174072e2 大纲 1.angular动画的相关概念 2.angular动画的绑定方式 3.angular动画代码实例 1.a ...
- CSS3 新特性
~平时喜欢逛博客,看别人的学习总结和遇到的问题解决办法,恰好最近在做书签整理,翻到了之前一个前辈移动前端的总结,所以我就按他的总结模块对自己的知识进行了梳理,不过由于都是手写的,为了方便,下面的都是平 ...
- CSS3 笔记四(Transforms/Transition/Animations)
CSS3 2D Transforms Methods translate() rotate() scale() skewX() skewY() matrix() 1> translate() T ...
- wp8.1 Study8:页面过渡和主题动画(Page transition and Theme animations)
一.在WP8.1中是有动画(Animation)的: 页面导航(默认为旋转式Turnstile).PointerDown/up(默认是倾斜).页面旋转.MenuFlyout出现等等 二.页面过渡(Pa ...
- CSS 3学习——transition 过渡
以下内容根据官方规范翻译以及自己的理解整理. 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡 ...
- D3中动画(transition函数)的使用
关于transition的几个基本点: 1. transition()是针对与每个DOM element的,每个DOM element的transition并不会影响其他DOM element的tra ...
- Animations功能(区别于Transitions)
CSS3实现动画: 1 Transitions:定义元素的某个属性从一个属性值平滑过渡到另一个属性值. Transitions属性的使用方法如下所示: transition: property | ...
- AngularJS学习--- 动画操作 (Applying Animations) ngAnimate step 12
1.切换目录 git checkout step-12 npm start 2.效果图 这里在点击右边的缩略图时,会有一个很明显的从下向上的动画过程. 3.代码实现: step11和step12之间的 ...
随机推荐
- Android Studio当中的创建新方法的快捷键该如何使用?
当有红线出现的时候,我们的代码并没有编译出错,则需要输入alt+enter则可以得到相应的神奇效果了.这个方法我竟然今天才知道,也真是丢脸了.比如说我们书写了一个新的没有创建的方法,我们直接输入alt ...
- git设置github的远程仓库的相关操作
git能够把github作为远程仓库,本地可以进行推送有关变更,从而多人可以进行协作开发工作. 1 ssh-keygen -t rsa -C "your-email@163. ...
- gradle 参数配置监听
说明 gradle提供了对project状态配置监听的接口回调,以方便我们来配置一些Project的配置属性,监听主要分为两大类,一种是通过project进行 回调,一种是通过gradle进行回调,作 ...
- Activit 5.13 工作流部署新版本后回退到上一个版本
有时因为某些原因Activit流程部署新版本后,还没有发起流程,回退到上一个版本.操作过程: 1.查询版本更新记录,记录字段ID_值,假设值为100: select to_char(t.deploy_ ...
- springcloud微服务实战:Eureka+Zuul+Ribbon+Hystrix+SpringConfig
原文地址:http://blog.csdn.net/yp090416/article/details/78017552 springcloud微服务实战:Eureka+Zuul+Ribbon+Hyst ...
- [日常] 小白来装机基本概念BIOS与硬盘分区
这两天因为在linux进行测试,先是搞坏了linux的系统,然后在重装linux系统后搞坏了引导.在修复引导的过程中,搞坏了本机的win8系统,再次修复引导与重装linux后,linux可以访问了,w ...
- 2. Go语言—包概念
一.包的概念 和python一样,把相同功能的代码放到一个目录,称之为包 包可以被其他包引用(若包中变量/函数被其他包调用,名需大写) main包是用来生成可执行文件,每个程序只有一个main包 包的 ...
- Loadrunner Controller运行不了,提示cannot create Vusers
执行场景时显示: Loadrunner Controller cannot create Vusers.Ensure that your load generators are available a ...
- 《为什么说 Prometheus 是足以取代 Zabbix 的监控神器?》
为什么说 Prometheus 是足以取代 Zabbix 的监控神器? Kuberneteschina 致力于提供最权威的 Kubernetes 技术.案例与Meetup! 关注他 12 人赞同 ...
- mysql 实现经纬度排序查找功能
需求如下: 商品有多个门店,用户使用App时需要查找附近门店的商品,商品要进行去重分页. 思路: 1.确认mysql自带经纬度查询函数可以使用. 2.该需求需要利用分组排序,取每个商品最近门店的商品i ...