-50%); transition: all 0.4s ease-out; outline: 0;}button:ho
标签：
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===31000ms /
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>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属性
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/33187.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")