动画分为:

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. 【分享】标准springMVC+mybatis项目maven搭建最精简教程

    文章由来:公司有个实习同学需要做毕业设计,不会搭建环境,我就代劳了,顺便分享给刚入门的小伙伴,我是自学的JAVA,所以我懂的.... (大图直接观看显示很模糊,请在图片上点击右键然后在新窗口打开看) ...

  2. Sublime配置python开发环境

    Package Control Package Control 是Sublime 里直接安装附加插件的包管理器.可以通过以下步骤手动安装: 1.点击Preferences > Browse Pa ...

  3. Android混合开发之WebViewJavascriptBridge实现JS与java安全交互

    前言: 为了加快开发效率,目前公司一些功能使用H5开发,这里难免会用到Js与Java函数互相调用的问题,这个Android是提供了原生支持的,不过存在安全隐患,今天我们来学习一种安全方式来满足Js与j ...

  4. ASP.NET Core 中文文档 第四章 MVC（4.1）Controllers, Actions 和 Action Results

    原文:Controllers, Actions, and Action Results 作者:Steve Smith 翻译:姚阿勇(Dr.Yao) 校对:许登洋(Seay) Action 和 acti ...

  5. setCapture、releasCapture 浅析

    1. setCapture 简介 setCapture可以将鼠标事件锁定在指定的元素上,当元素捕获了鼠标事件后,该事件只能作用在当前元素上. 以下情况会导致事件锁定失败: 当窗口失去焦点时,锁定的事件 ...

  6. 关于BAPI_PATIENT_CREATE（病患主数据创建）

    第一次使用BAPI,遇到几个问题.现总结如下. CALL FUNCTION 'BAPI_PATIENT_CREATE' EXPORTING client = * INSTITUTION = '*' * ...

  7. 【从零开始学BPM，Day2】默认表单开发

    [课程主题]主题:5天,一起从零开始学习BPM[课程形式]1.为期5天的短任务学习2.每天观看一个视频,视频学习时间自由安排. [第二天课程] Step 1 软件下载:H3 BPM10.0全开放免费下 ...

  8. jenkins无法重启tomcat的原因

    在使用Hudson的执行sh脚本的时候,如果sh脚本是一个后台进程,如 Tomcat 这样的服务.如果使用Hudson的默认配置,会发现这些sh 进程有启动的过程,但是不会常驻后台,看Hudson 输 ...

  9. windows10安装mysql5.7.17是这样安装的吗？

    操作 全允许

  10. 杂项之python描述符协议

    杂项之python描述符协议 本节内容 由来 描述符协议概念 类的静态方法及类方法实现原理 类作为装饰器使用 1. 由来 闲来无事去看了看django中的内置分页方法,发现里面用到了类作为装饰器来使用 ...