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()

参数

动画完成步数
- 参数类型:Number
第一个步进点
- 参数: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>

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);

}

 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属性的更多相关文章

css简单动画（transition属性）
一.对transition属性的认识 1.transition 属性是一个简写属性,可用于设置四个过渡属性:transition-property 过渡效果的 CSS 属性的名称(height ...
前端深入之css篇丨2020年前，彻底掌握css动画【transition】
写在前面马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所 ...
css动画-animation各个属性详解（转）
CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...
css 动画 transform transition animation
1.transform transform 是通过在浏览器里面让网页元素移动旋转透明模糊等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...
css3动画（transition）属性探讨
在webapp引用开发中经常会用到css3动画效果,下面我们就一起探讨一下这个属性的使用. 在哪里定义动画效果? css3动画一般通过鼠标事件或者说状态定义动画,通常我们可以用CSS中伪类和js中的鼠 ...
【CSS】css动画及过渡和变换属性
1.css动画创建一个动画: @keyframes name{ //动画名字 0% { //动画开始 transform: translateY(0); } 100% { //动画结束 transf ...
知识点干货——CSS动画
CSS动画 (transition.animation) //2D动画 transform:translate(); /*偏移*/ transform:rotate(); /*旋转角度*/ trans ...
CSS动画实例
上一篇讲过css动画transform transition的语法,这一节展示自己做的几个小例子加深印象 1. 线条动画效果代码:最外层div包含2个小的div : a和b. a有左右边框(高度 ...
CSS:word-wrap/overflow/transition
一自动换行:一个div有固定宽高,如果其内容很长,必须两行以上才能显示完整的时候,有两种情况要留意 1 默认如果其内容都是中文,那么内容是可以自适应,而不会溢出div 2 如果内容除了中文之外,还有 ...

随机推荐

js 事件驱动原理
还记得当初学JAVA-GUI编程时学习过事件监听机制,此时再学习JavaScript中的事件驱动机制,不免简单.当初学习时也是画过原理图,所以从原理图开始吧! js是采用事件驱动(event-driv ...
【ASP.Net Core】不编译视图文件
原文:[ASP.Net Core]不编译视图文件版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/aqtata/article/details/818 ...
xwiki系统知识库 xwiki
1.下载tomcat tar -zxvf apache-tomcat-8.0.14.tar.gz mv apache-tomcat-8.0.14 tomcat-xwiki-8.0 2.下载xwik ...
vue echarts 给饼图中间添加文字，并且添加多个样式
最近根据设计要求写了一个统计图,以下是设计要求,要求中间文字分别是总数和汉字,样式分别不同好吧具体的解决方案如下方案一 series: [ { type:'pie', radius: ['50%' ...
axios调用接口
axios调用接口 1. 按照axiosnpm install --save-dev axios2.在main.js 引入axios, 设置全局属性$http 指向axios main.js impo ...
thinkphp rabc权限总结
今天晚上把ThinkPHP的权限分配弄明白了,心里的包袱立刻放下了,感觉那个爽啊!稍微记录一下. 背景:CMS系统开发(17do). 项目分组:Admin(后台管理).Home(前台显示). Admi ...
挂载U盘
.fdisk -l 查看当前系统存储盘 (sdaX一般是系统自带, sdbX则是外接) .mount /dev/sdbX /mnt/usb/ (如果usb目录不存在可创建新目录) .umount /m ...
C++访问sqlite3的初体验
Sqlite确实是一个比较好的本地数据库,从接触它的时候就喜欢上了它,它可以在很多情况下简化应用.不过以前都是在Java里面使用,或者Linux C下使用的,现在有个项目(C++)可能我会用到sqli ...
duilib教程之duilib入门简明教程8.完整的自绘标题栏
看了前面那么多教程,相信对duilib已有基本映像了,我们就快马加鞭,做出一个完整的自绘标题栏吧~ 看到下面这个效果图,小伙伴们是不是有点惊呆了呢~O(∩_∩)O~ duilib实现以 ...
LUOGU P4159 [SCOI2009]迷路(矩阵乘法)
传送门解题思路以前bpw讲过的一道题,顺便复习一下矩阵乘法.做法就是拆点,把每个点拆成$9$个点,然后挨个连边.之后若$i$与$j$之间的边长度为$x$,就让$i$的第\(x\ ...

CSS动画之transition属性