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. ps制作浮雕和投影效果

    1用文字横排工具写个hope,按住ctrl+t可以调试出文字工具,上面直接用500点来改变文字的大小.2 用矩形选框工具直接可以切割图片的大小,然后双击一个图层,添加样式为浮雕....然后合并图层3 ...

  2. JAVA-基础(Stream流)

    说起stream流大家的第一反应是io,但是实际上谁规定流一定是存在io包里呢?在java8中得益于Lambda表达式的函数式编程,引入了一个全新的概念,stream. 1.优势? 在java8之前我 ...

  3. docker ps -a

    1 pwd 2 mkdir data 3 ll 4 uname -n 5 cd data/ 6 ll 7 pwd 8 ll 9 wget -N --no-check-certificate https ...

  4. win10 +Kinect V1 1414环境配置

    win10 +Kinect V1 1414环境配置 想起老Lab的机器人头顶的Kinect 安装准备 demo展示 人脸识别 照片不能够检测到人脸 可以去除背景 检测骨架 想起老Lab的机器人头顶的K ...

  5. vue3环境搭建以及创建简单项目。

    1.环境准备,以下都是我的版本.自己在官网上面下载需要的版本. 尝试了Python3.7.3在创建vue3项目时出现问题. node.js10.16.0, python2.7.16, yarn1.16 ...

  6. Oracle18C安装后首次创建数据库并用sql developer 创建连接和用户

    注意: SQL Developer 不能用于创建Oracle数据库,只能用来连接已经创建的数据库,数据库的建立要通过Database Configuration Assistant(DBCA)来完成. ...

  7. 【JZOJ6293】迷宫

    description analysis 有没有想起[\(NOIP2018\)]保卫王国? 设\(tr[t][x][y]\)表示线段树上的\(t\)节点代表的区间,从最左边列的\(x\)行到最右边列\ ...

  8. day18 函数定义、参数;名称空间;全局变量及局部变量。

    Python之路,Day6 = Python基础6 函数的定义 def func1(): # 定义一个函数,名字叫func1,括号中没有传入参数 print('hello word') # 这里是 f ...

  9. thinkphp Trace方法

    页面Trace只能用于有页面输出的情况,但是trace方法可以用在任何情况,而且trace方法可以用于AJAX等操作. Trace方法的格式: trace('变量','标签','级别','是否记录日志 ...

  10. hadoop新增新数据节点和退役数据节点

    新增数据节点 0. 需求随着公司业务的增长,数据量越来越大,原有的数据节点的容量已经不能满足存储数据的需求,需要在原有集群基础上动态添加新的数据节点.1. 环境准备 (1)在hadoop03主机上再克 ...