CSS动画之transition属性
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>
- 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属性的更多相关文章
- 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 如果内容除了中文之外,还有 ...
随机推荐
- Linux环境下Jmeter 报错:Unable to get local host IP address
主要是没有在host中配置本机ip hostname查看本机名 [root@test task]# hostname test [root@test task]# 打开 [root@test task ...
- springboot中参数处理
springboot1中处理是这样的 @Configuration public class WebConfig extends WebMvcConfigurerAdapter{ @Autowired ...
- c++ socket 出现绑定失败的一个特殊原因。Bind failed Error:10049
这个问题,客户那边出现这种情况已经将近一年时间, 一直都得不到很好的解决,我提供出去的动态库可以确保没有问题,因为除了这家公司,其他有好几家公司都在用的,都是很正常的,但是这家公司很奇怪,不,应该说这 ...
- GenericServlet简介和使用
GenericServlet:抽象类 是Servlet接口的抽象类,为Servlet接口中的一些方法做了空实现,只将service()方法作为抽象方法 Servlet代码实现GenericServle ...
- 2018-10-8-Win10-使用-GHO-安装出现-UWP-软件打开闪退-应用商店无法安装软件
title author date CreateTime categories Win10 使用 GHO 安装出现 UWP 软件打开闪退 应用商店无法安装软件 lindexi 2018-10-8 18 ...
- 随笔记录 Linux基本操作命令 2019.7.27
临时关闭防火墙systemctl stop firewalld永久关闭防火墙systemctl disable firewalld 临时关闭selinux安全机制setenforce 0永久关闭sel ...
- fso文件夹操作用法实操
Sub 订单转换()Application.ScreenUpdating = FalseOn Error Resume Next Dim fso, fl, m%, n%, p%, q& Dim ...
- Leetcode211. Add and Search Word - Data structure design 添加与搜索单词 - 数据结构设计
设计一个支持以下两种操作的数据结构: void addWord(word) bool search(word) search(word) 可以搜索文字或正则表达式字符串,字符串只包含字母 . 或 a- ...
- zepto(mark)
Zepto的设计目的是提供 jQuery 的类似的API,但并不是100%覆盖 jQuery .Zepto设计的目的是有一个5-10k的通用库.下载并快速执行.有一个熟悉通用的API,所以你能把你主要 ...
- Cookie 干货
从前端开发看Cookie Cookie是浏览器端的存储机制 存在意义: 为了解决“如何记住用户信息”而发明的: 当用户访问网页时,他的名字可以存储在cookie中 下次用户访问该页面时,cookie会 ...