动画分为:

1.css3动画:(动画性能远高于js)

　 1).过渡动画(transition)

　 2).关键帧动画(@keyframes,animation)

2.js动画:

过渡动画(transition)

语法:　　(所有时长单位都是秒）

1.变化属性(transition-property(属性名))

2.持续时长(transition-duration(持续时长))*该属性必须有(默认时间为"0")

3.变化曲线(transition-timing-function)

4.延迟时长(transition-delay)

　　*当失去触发时机的时候,还会动画返回原来的状态

transition-timing-function：变化速率

1.ease(默认值):先快再快再慢

2.ease-in:淡入(动画刚开始的时候变化慢)

3,ease-out:淡出(动画快结束的时候变化慢)

4.ease-in-out:淡入淡出

5.linear:匀速变化

6.cubic-bezier:贝塞尔曲线,所有的变化都可以用贝塞
尔曲线来代替
cubic-bezier(x1,y1,x2,y2),x1,y1,x2,y2值的范围都是0~1

贝塞尔曲线图：（下面的例子会提到，具体不做详解）

过渡动画没有自己的触发时机,只有以下几种,可以触发过渡动画:

1.:hover(最常用)

2.:focus

3.:checked(多选输入框被勾选的状态)

4.媒体查询(@media screen and(条件){样式})

5.js

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title>过渡动画</title>

         <style type="text/css">

             .div1{

                 width: 200px;

                 height: 200px;

                 background: green;

                 /*变化属性:

                      默认值为all指代所有的属性(不写,默认该元素身上所有属性的值的更改,

                        都支持动画效果)

                  */

                 transition-property:all;

                 /*多组值之间用","隔开*/

                 transition-property: width,background;

                 /*持续时长,默认值为"0",就是没有动画(设置过渡动画一定不能省略)*/

                 transition-duration: 2s;

                 /*变化速率

                      四个值:1.ease(默认值):先快再快再慢

                             2.ease-in:淡入(动画刚开始的时候变化慢)

                             3,ease-out:淡出(动画快结束的时候变化慢)

                             4.ease-in-out:淡入淡出

                             5.linear:匀速变化

                             6.cubic-bezier:贝塞尔曲线,所有的变化都可以用贝塞

                               尔曲线来代替

                               cubic-bezier(x1,y1,x2,y2),x1,y1,x2,y2值的范围

                                  都是0~1

                  */

                 transition-timing-function: cubic-bezier(0.4,0.2,0.5,0.7);

                 /*延迟时长：延迟多久开始*/

                 transition-delay: 2s;

                 /*transition: all width,background 2s cubic-bezier(0.4,0.2,0.5,0.7) 2s;*/

             }

             /*再触发时机中,更改你想要看属性动画的那个属性的值*/

             .div1:hover{

                 width: 500px;

                 background: pink;

                 height: 500px;

             }

             .div2{

                 width: 200px;

                 height: 200px;

                 background: pink;

                 /*过渡动画*/

                 transition: all 2s linear ;

             }

             .div2:hover{

                 /*所有的属性都支持形变的*/

                 /*transform:多组形变用空格

                  background:多组之间用","号

                 */

                 /*形变中平移其实真正的位置没有改变,移动就是个假象*/

                 /*transform: translate(300px,100px) ;*/

                 opacity: 0.5;

                 /*margin-left:是真实改变*/

                 margin-left: 300px;

             }

             .text{

                 transition: 2s;

                 height: 100px;

             }

             /*过渡动画的focus时机*/

             .text:focus{

                 height: 300px;

             }

             .check{

                 margin-top: 50px;

                 transition: 2s;

             }

             .check:checked{

                 margin-top: 200px;

             }

             .div3{

                 width: 200px;

                 height: 200px;

                 background: yellow;

                 transition: 2s;

             }

             @media only screen and (min-width:800px ) {

                 .div3{

                     width: 500px;

                 }

             }

         </style>

     </head>

     <body>

         <p>eg1：</p>

         <div class="div1"></div>

         <hr />

         <p>eg2：</p>

         <div class="div2"></div>

         <hr />

         <p>eg3：</p>

         <form action="###">

             <!--

                 input:我们没有设置宽高,就可以看到它(特殊性),对于它设置宽高

                 动画的时候,避免兼容性问题,一般要设置初始宽高

                 *所有属性设置过渡动画的时候,一般给该属性设置初始值

             -->

             <input type="text" class="text" value="" />

             <br />

             <input type="checkbox" class="check" />

         </form>

         <hr /

         <p>eg4：</p>

         <!--媒体查询时机的例子-->

         <div class="div3"></div>

     </body>

 </html>

transtion:过渡动画的更多相关文章

  1. vue2.0 之 过渡动画transtion

    过渡的类名: 在进入/离开的过渡中,会有 6 个 class 切换 (v 是前缀,name = v) v-enter:定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移除. v-enter-ac ...

  2. vue过渡动画效果

    1 过渡基础 1.1 过渡的方式 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS ...

  3. CSS3过渡动画&关键帧动画

    一.过渡动画 过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画. 所谓的状态就是指大小.位置.颜色.变形(transform)等等这些属性. Note:不是所有属性 ...

  4. CSS 奇技淫巧：动态高度过渡动画

    这个问题源自于掘金上的一个留言,一个朋友问到,为什么我下面这段代码的高度过渡动画失效了? 伪代码大概是这样: { height: unset; transition: all 0.3s linear; ...

  5. 用js触发CSS3-transition过渡动画

    用js触发CSS3-transition过渡动画 经过这几天的工作,让我进一步的了解到CSS3的强大,原本许多需要js才能实现的动画效果,现在通过CSS3就能轻易实现了,但是CSS3也有自身的不足,例 ...

  6. CSS基础篇之背景、过渡动画

    background-origin(背景原点) 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat属性才能生效. background-origin: ...

  7. 基于ReactCSSTransitionGroup实现react-router过渡动画

      此前,我使用了react-router库来完成单页应用的路由,从而实现组件之间的切换能力.然而,默认页面的切换是非常生硬的,为了让页面切换更加缓和与舒适,通常的方案就是过渡动画. 这里我调研了2种 ...

  8. CSS3初学篇章_5（背景样式/列表样式/过渡动画）

    背景样式 1.背景颜色语法:background-color : transparent | color body { background-color:#CCCCCC;} 2.渐变色彩语法:back ...

  9. Windows Store App 过渡动画

    Windows Store App 过渡动画     在开发Windows应用商店应用程序时,如果希望界面元素进入或者离开屏幕时显得自然和流畅,可以为其添加过渡动画.过渡动画能够及时地提示用户屏幕所发 ...

随机推荐

  1. 理解CSS边框border

    前面的话   边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式   边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...

  2. 如何一步一步用DDD设计一个电商网站（三）—— 初涉核心域

    一.前言 结合我们本次系列的第一篇博文中提到的上下文映射图(传送门:如何一步一步用DDD设计一个电商网站(一)—— 先理解核心概念),得知我们这个电商网站的核心域就是销售子域.因为电子商务是以信息网络 ...

  3. DDD 领域驱动设计－看我如何应对业务需求变化，愚蠢的应对？

    写在前面 阅读目录: 具体业务场景 业务需求变化 "愚蠢"的应对 消息列表实现 消息详情页实现 消息发送.回复.销毁等实现 回到原点的一些思考 业务需求变化,领域模型变化了吗? 对 ...

  4. django server之间通过remote user 相互调用

    首先,场景是这样的:存在两个django web应用,并且两个应用存在一定的联系.某些情况下彼此需要获取对方的数据. 但是我们的应用肯经都会有对应的鉴权机制.不会让人家随随便便就访问的对吧.好比上车要 ...

  5. html与html5

    HTML 是一种在 Web 上使用的通用标记语言.HTML 允许你格式化文本,添加图片,创建链接.输入表单.框架和表格等等,并可将之存为文本文件,浏览器即可读取和显示.HTML 的关键是标签,其作用是 ...

  6. HDU1671——前缀树的一点感触

    题目http://acm.hdu.edu.cn/showproblem.php?pid=1671 题目本身不难,一棵前缀树OK,但是前两次提交都没有成功. 第一次Memory Limit Exceed ...

  7. AbpZero--1.如何开始

    1.加群 群号:104390185,下载这个文件并解压 用VS2015打开aspnet-zero-1.9.0.1 2.修改Web项目web.config连接字符串 <add name=" ...

  8. 手把手教你做个人 app

    我们都知道,开发一个app很大程度依赖服务端:服务端提供接口数据,然后我们展示:另外,开发一个app,还需要美工协助切图.没了接口,没了美工,app似乎只能做成单机版或工具类app,真的是这样的吗?先 ...

  9. iOS7 NavigationController 手势问题

    在iOS7中,如果使用了UINavigationController,那么系统自带的附加了一个从屏幕左边缘开始滑动可以实现pop的手势.但是,如果自定义了navigationItem的leftBarB ...

  10. ReSharper详解Index0

    JetBrains ReSharper可以帮助Visual Studio用户编写出更好的代码.支持对C#,VB.NET,XAML,JavaScript,TypeScript,JSON,XML,HTML ...