动画分为:

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. PHP实现RTX发送消息提醒

    RTX是腾讯公司推出的企业级即时通信平台,大多数公司都在使用它,但是我们很多时候需要将自己系统或者产品的一些通知实时推送给RTX,这就需要用到RTX的服务端SDK,建议先去看看RTX的SDK开发文档( ...

  2. 【知识必备】内存泄漏全解析，从此拒绝ANR，让OOM远离你的身边，跟内存泄漏say byebye

    一.写在前面 对于C++来说,内存泄漏就是new出来的对象没有delete,俗称野指针:而对于java来说,就是new出来的Object放在Heap上无法被GC回收:而这里就把我之前的一篇内存泄漏的总 ...

  3. Chrome出了个小bug：论如何在Chrome下劫持原生只读对象

    Chrome出了个小bug:论如何在Chrome下劫持原生只读对象 概述 众所周知,虽然JavaScript是个很灵活的语言,浏览器里很多原生的方法都可以随意覆盖或者重写,比如alert.但是为了保证 ...

  4. TODO：搭建Laravel VueJS SemanticUI

    TODO:搭建Laravel VueJS SemanticUI Laravel是一套简洁.优雅的PHP开发框架(PHP Web Framework).可以让你从面条一样杂乱的代码中解脱出来:它可以帮你 ...

  5. UniqueIdentifier 数据类型 和 GUID 生成函数

    UniqueIdentifier 数据类型用于存储GUID的值,占用16Byte. SQL Server将UniqueIdentifier存储为16字节的二进制数值,Binary(16),按照特定的格 ...

  6. 一起学微软Power BI系列-使用技巧(1)连接Oracle与Mysql数据库

    说起Oracle数据库,以前没用过Oracle不知道,但是这1年用Oracle后,发现真的是想狂吐槽,特别是那个.NET驱动和链接字符串,特别奇葩.总归是和其他数据库不一样,标新立异,不知道为何.另外 ...

  7. C#文件安全管理解析

    在实际的项目开发中,我们经常需要使用到文件的I/O操作,主要包含对文件的增改删查等操作,这些基本的操作我们都是很熟悉,但是较少的人去考虑文件的安全和操作的管理等方面,例如文件的访问权限管理,文件数据的 ...

  8. FFmpeg + SoundTouch实现音频的变调变速

    本文使用FFmpeg + SoundTouch实现将音频解码后,进行变调变速处理,并将处理后的结果保存为WAV文件. 主要有以下内容: 实现一个FFmpeg的工具类,保存多媒体文件所需的解码信息 将解 ...

  9. Ajax使用WCF实现小票pos机打印源码

    通过ajax跨域方式调用WCF服务,实现小票pos机的打印,源码提供web方式,客户端方式测试,服务驻留右侧底部任务栏,可控制服务开启暂停,用户可自定义小票打印模板,配合零售录入. qq  22945 ...

  10. Entity Framework的启动速度优化

    最近开发的服务放到IIS上寄宿之后,遇到一些现象,比如刚部署之后,第一次启动很慢:程序放置一会儿,再次请求也会比较慢.比如第一个问题,可以解释为初次请求某一个服务的时候,需要把程序集加载到内存中可能比 ...