动画分为:

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. HTTPS 互联网世界的安全基础

    近一年公司在努力推进全站的 HTTPS 化,作为负责应用系统的我们,在配合这个趋势的过程中,顺便也就想去搞清楚 HTTP 后面的这个 S 到底是个什么含义?有什么作用?带来了哪些影响?毕竟以前也就只是 ...

  2. 以bank account 数据为例，认识elasticsearch query 和 filter

    Elasticsearch 查询语言(Query DSL)认识(一) 一.基本认识 查询子句的行为取决于 query context filter context 也就是执行的是查询(query)还是 ...

  3. Android GridView 通过seletor 设置状态和默认状态

    Android中可以通过selector控制GridView Item 的状态,而省去使用代码控制 GridView View Selector Xml文件 <?xml version=&quo ...

  4. Python标准模块--ContextManager

    1 模块简介 在数年前,Python 2.5 加入了一个非常特殊的关键字,就是with.with语句允许开发者创建上下文管理器.什么是上下文管理器?上下文管理器就是允许你可以自动地开始和结束一些事情. ...

  5. 关于 CSS 反射倒影的研究思考

    原文地址:https://css-tricks.com/state-css-reflections 译者:nzbin 友情提示:由于演示 demo 的兼容性,推荐火狐浏览.该文章篇幅较长,内容庞杂,有 ...

  6. [WARNING] Using platform encoding (GBK actually) to copy filtered resources, i.e. build is platform

    eclipse maven clean install 报错 1. 修改properties-->resource-->utf-8仍然报错 2.修改项目pom.xml文件,增加: < ...

  7. J a v a 的“多重继承”

    接口只是比抽象类“更纯”的一种形式.它的用途并不止那些.由于接口根本没有具体的实施细节——也就是说,没有与存储空间与“接口”关联在一起——所以没有任何办法可以防止多个接口合并到一起.这一点是至关重要的 ...

  8. 【夯实PHP基础】nginx php-fpm 输出php错误日志

    本文地址 原文地址 分享提纲: 1.概述 2.解决办法(解决nginx下php-fpm不记录php错误日志) 1. 概述 nginx是一个web服务器,因此nginx的access日志只有对访问页面的 ...

  9. 文档对象模型DOM通俗讲解

    转自:http://www.jb51.net/article/42671.htm 在开始之前先说一点,DOM是非常容易理解的,但是大家说的太官方,让人很是难于理解,我们就用非常简单的语言翻译一遍.加深 ...

  10. 【干货分享】流程DEMO-离职流程

    流程名: 离职申请   流程相关文件: 流程包.xml WebService业务服务.xml WebService.asmx WebService.cs   流程说明: 流程中集成了webservic ...