transition 属性

简介

transition(过渡)) 是指从一个状态到另一个状态的变化。比如当鼠标在某个元素上悬停时，我们会修改它的样式，采用 transition 可以创建一个平滑的动画效果。

简单用法

代码

transition: background 0.5s linear;

意义

在 0.5 秒的时间里，按照 linear 的时间函数(timing-function)来改变某个元素的 background 属性。

示例

当鼠标在按钮上悬停时(hover)改变按钮的 background。

  • html

    <button>按钮</button>

  • css

    button {
    
    padding:1em 2em;
    
    background: #fff;
    
    transition: background 1s linear;
    
}

button:hover {
    
    background: deeppink;
    
}

  • 效果

如果我们把 transition: background 1s linear 放到hover中则只有鼠标离开时才有动画效果;

简写transition全部参数

transition:[property] [duration] [delay] [timeing-function]

transition全写

  • transition-property:all; /* 规定过渡css属性名称 */
  • transition-duration: 1s;/* 过渡持续时间 3s===3*1000ms */
  • transition-delay: 0.1s;/* 过渡效果延迟开始时间 */
  • transition-timing-function: ease-in;/* 时间函数 */

时间函数Steps()

参数

  1. 动画完成步数

    • 参数类型:Number
  2. 第一个步进点
    • 参数:start/end
    • 默认:end

示例

  • html 
      <div id="block"></div>
  • css 
      #block{
    
      position: absolute;
    
      left: 50%;
    
      top: 30%;
    
      transform: translateX(-50%);
    
      width: 12em;
    
      height: 12em;
    
      background: #000;
    
      transition: all 1s steps(5,end);
    
      /*transition: all 1s linear;*//*平滑过渡*/
    
  }

  #block:hover{
    
      width: 2em;
    
      height: 2em;
    
  }
  • 效果

添加多个过渡

  • html 
      <div id="block"></div>
  • css 
      #block{
    
      position: absolute;
    
      left: 50%;
    
      top: 30%;
    
      transform: translateX(-50%);
    
      width: 12em;
    
      height: 12em;
    
      background: #000;
    
      transition: width 1s linear,height 1s linear,background 1s ease-in-out;
    
  }

  #block:hover{
    
      background: burlywood;
    
      width: 2em;
    
      height: 2em;
    
  }
  • 效果

添加移除类触发过渡

简单示例

  • 效果

  • html
<body>

    <button id="show">Show it</button>

    <div id="wait-show" class="hide">

        <h1>Title</h1>

        <p>Pressing the button shows this content.</p>

    </div>

</body>
  • css
body {

  background-color: #134;

  transition: background 0.5s ease-out;

  font-family: HelveticaNeue, Arial, Sans-serif;

}

body.on {

  background-color: #099;

}

button{

  background: transparent;

  border: 2px solid #fff;

  border-radius: 1em;

  color: #fff;

  cursor: pointer;

  font-size: 24px;

  padding: 1em 2em;

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  transition: all 0.4s ease-out;

  outline: 0;

}

button:hover{

  background: #fff;

  color: #099;

}

#wait-show{

  color: #fff;

  text-align: center;

  position: absolute;

  left: 50%;

  transform: translate(-50%,-50%);

  transition: all 0.5s cubic-bezier(.83,-0.43,.21,1.42);

}

.hide{

  opacity: 0;

  top:calc(50% + 10em);

}

.show{

  opacity: 1;

  top: calc(50% + 6em);

}
  • js
 let showBtn = document.getElementById('show');

    let body = document.body;

    let waitShow = document.getElementById('wait-show');

    /**

    * 监听点击事件

    */

    showBtn.addEventListener('click', function (e) {

        // 更改body颜色

        body.className = body.className === 'on' ? '' : 'on';

        waitShow.className = waitShow.className === 'hide' ? 'show' : 'hide';

    })

    document.getElementsByTagName('body')

CSS动画之transition属性的更多相关文章

  1. css简单动画（transition属性）

    一.对transition属性的认识 1.transition 属性是一个简写属性,可用于设置四个过渡属性:transition-property     过渡效果的 CSS 属性的名称(height ...

  2. 前端深入之css篇丨2020年前，彻底掌握css动画【transition】

    写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所 ...

  3. css动画-animation各个属性详解（转）

    CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...

  4. css 动画 transform transition animation

    1.transform  transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...

  5. css3动画（transition）属性探讨

    在webapp引用开发中经常会用到css3动画效果,下面我们就一起探讨一下这个属性的使用. 在哪里定义动画效果? css3动画一般通过鼠标事件或者说状态定义动画,通常我们可以用CSS中伪类和js中的鼠 ...

  6. 【CSS】css动画及过渡和变换属性

    1.css动画 创建一个动画: @keyframes name{ //动画名字 0% { //动画开始 transform: translateY(0); } 100% { //动画结束 transf ...

  7. 知识点干货——CSS动画

    CSS动画 (transition.animation) //2D动画 transform:translate(); /*偏移*/ transform:rotate(); /*旋转角度*/ trans ...

  8. CSS动画实例

    上一篇讲过css动画transform transition的语法,这一节展示自己做的几个小例子加深印象 1. 线条动画效果 代码:最外层div包含2个小的div : a和b.   a有左右边框(高度 ...

  9. CSS:word-wrap/overflow/transition

    一 自动换行:一个div有固定宽高,如果其内容很长,必须两行以上才能显示完整的时候,有两种情况要留意 1 默认如果其内容都是中文,那么内容是可以自适应,而不会溢出div 2 如果内容除了中文之外,还有 ...

随机推荐

  1. 20140315 模板类pair的用法 2、visual 2010调整代码格式是ctrl+k+

    1.模板类pair的用法 包含头文件#include<utility>   http://blog.csdn.net/laixingjun/article/details/9005200 ...

  2. 29-Ubuntu-远程管理命令-03-SSH工作方式简介

    在Linux中SSH是非常重要的工具,通过SSH客户端可以连接到运行了SSH服务器的远程机器上. 1.SSH客户端是一种使用Secure Shell(SSH)协议连接到远程计算机的软件程序. 2.SS ...

  3. POJ 4718 /// 树链剖分+线段树区间合并 求树上两点间的LCIS长度

    题目大意: 给定n个点 每个点都有权值 接下来给定树的n条边 第 i 个数 a[i] 表示 i+1到a[i]之间 有一条边 给定q q个询问 每次询问给出 x y 求x到y的最长上升子序列的长度 题解 ...

  4. Linux CPU负载状态：%us/%sy/%ni/%id/%wa/%hi/%si/%st含义

    原文 Linux CPU负载状态:%us/%sy/%ni/%id/%wa/%hi/%si/%st含义 缙哥哥发现用了雅黑的探针,在 Linux 的 CPU 状态信息中发现,有“%us.%sy.%ni. ...

  5. 原来腾迅的QQ号竟然是个int变量

    今天有个人加我好友,我一点开申请界面 我惊异了.... 我擦,号码竟然是个负数,但是人物资料里面却是个正数 有编程经验的人,一眼就看得出来原因.而且一眼就看得出来,它们是什么 1857918296 + ...

  6. nginx 知识

    nginx如何实现高并发? 启动nginx服务器后,输入 ps -ef |grep nginx,会发现nginx有一个master进程 和若干个worker进程, 这些worker进程是平等的,都是被 ...

  7. FaceNet pre-trained模型以及FaceNet源码使用方法和讲解

    Pre-trained models Model name LFW accuracy Training dataset Architecture 20180408-102900 0.9905 CASI ...

  8. C++调用JS,JS调用C++

    JS调用C++,通过设置DIID_HTMLDocumentEvents事件,来捕获HTMLWINDOW上的事件,再通过事件对象的get_srcElement得到事件源,从而得到指定元素对象,从而获取元 ...

  9. duilib教程之duilib入门简明教程11.部分bug

    一.WindowImplBase的bug    在第8个教程[2013 duilib入门简明教程 -- 完整的自绘标题栏(8)]中,可以发现窗口最大化之后有两个问题,    1.最大化按钮的样式还是没 ...

  10. springboot下自定义配置文件，并在项目里读取的方法

    首先 pom文件引入springboot文件处理器 <dependency> <groupId>org.springframework.boot</groupId> ...