动画分为:

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. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  3. Ubuntu 14.04中Elasticsearch集群配置

    Ubuntu 14.04中Elasticsearch集群配置 前言:本文可用于elasticsearch集群搭建参考.细分为elasticsearch.yml配置和系统配置 达到的目的:各台机器配置成 ...

  4. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  5. C# await和async

    基础阅读:http://www.cnblogs.com/jesse2013/p/async-and-await.html 答疑阅读:http://www.cnblogs.com/heyuquan/ar ...

  6. WinForm设置控件焦点focus

    winform窗口打开后文本框的默认焦点设置,进入窗口后默认聚焦到某个文本框,两种方法: ①设置tabindex 把该文本框属性里的tabIndex设为0,焦点就默认在这个文本框里了. ②Winfor ...

  7. 【夯实PHP基础】PHP数组，字符串，对象等基础面面观

    本文地址 分享提纲 1.数组篇 2.字符创篇 3.函数篇 4.面向对象篇 5.其他篇 /*************************** 一.数组篇 Begin***************** ...

  8. SharePonit 2010 更改另存为列表模板的语言类型

    从朋友处得来一个列表模板:AccessApplicationSharePoint.stp 将其通过:网站操作----网站设置----列表模板,上传进去.然后去创建列表,发现找不到此模板. 根据多年老司 ...

  9. Android:Activity+Fragment及它们之间的数据交换.

    Android:Activity+Fragment及它们之间的数据交换 关于Fragment与Fragment.Activity通信的四种方式 比较好一点的Activity+Fragment及它们之间 ...

  10. 多个ul中第一个li获取定位

    如果我们只是获取一个ul中的第一个li的话,那么我们可以这样写: $("ul li:first"); $("ul li").eq(0); $("ul ...