CSS3 过渡和动画
1.CSS过渡
- 含义：在没有过渡属性的时候，当一个元素的属性值发生变化时，浏览器就会将这个元素瞬间渲染成新属性值的样式。例如一个定位元素top:0，动态修改成top:100px，这个元素就瞬间跑到100px的位置，有时候我们为了达到某种视觉效果，希望它以动画的形式将样式转变的过程展现出来，而这个过程就是过渡。过渡其实就是一个简单的动画效果
- 相关属性：transition,它其实是4个属性合并而成的
| 属性名 | 说明 |
|---|---|
| transition-property | 参与过渡的属性(默认值为all，且有明确的数值的属性才会支持) |
| transition-duration | 过渡持续时间(默认值为0) |
| transiton-timing-function | 时间曲线(默认值为ease函数) |
| transition-delay | 过渡延迟时间(默认值为0) |
- 基本使用
transition: all 1s;
- 多个属性过渡：各个属性用 逗号 隔开
transition: width 1s,height 1s;
- 设置延迟和时间曲线
transition: width 2s ease 1s;
2.过渡的时间函数
| 属性名 | 说明 |
|---|---|
| ease | 默认，先快后慢 |
| linear | 匀速 |
| ease-in | 先慢后快 |
| steps(n) | 将过渡时间划分成大小相等的时间时隔来运行，分成多少分由参数决定，通俗来说就是跳着走 |
transition: width 2s steps(4);
3.过渡事件
| 事件名称 | 说明 |
|---|---|
| transitionstart | 过渡开始执行就会触发 这个事件（存在延迟的话，延迟结束之后才执行） |
| transitionend | 过渡完成之后就会触发这个事件 |
- 注意：只能用addaddEventListener添加事件，不支持属性赋值函数的形式监听
<script>
var div = document.querySelector("div")
var scale = true
div.onclick = function(){
if(scale){
div.style.width = "400px"
}else{
div.style.width = "200px"
}
scale = !scale
}
// 这个方式监听不支持
div.transitionend = function(){
console.log("过渡结束了")
}
// 下面的写法才支持
div.addEventListener("transitionend",function(){
console.log("过渡结束了")
})
div.addEventListener("transitionstart",function(){
console.log("过渡开始了")
})
</script>
- 过渡事件触发的次数与transition-property过渡属性的个数有关，过渡属性有几个就会触发几次（如果过渡属性是复合属性，如border-width相当于是border-top-width、border-bottom-width、border-left-width和border-right-width这四个属性的集合，则过渡事件触发4次）
transition: width 2s,height 1s;
div.addEventListener("transitionend",function(){
console.log("过渡结束了") //触发两次
})
4.动画
- 原理：动画通过设置关键帧来控制样式的变化
- 注册动画：使用@keyframes注册动画名称，设置若干个关键帧，控制元素在不同时段的样式(关键帧可以用百分比，也可以用from/to，from代表0%,to代表100%)
@keyframes myAnimate{
0%{
top:0;
left:0;
}
33.33%{
top:0;
left:300px;
}
66.66%{
top:300px;
left:300px;
}
100%{
top:300px;
left:0;
}
}
- 应用动画
.item{
animation: myAnimate 3s;
}
- 注意：如果一个元素已经绑定了动画，则在页面初始化时和元素由隐藏切换为显示时，都会执行动画。另外动态为元素添加动画时，也会执行动画
4.动画其余属性
- animation是简写，它包含几个子属性
| 属性名 | 说明 |
|---|---|
| animation-name | 动画名称 |
| animation-duration | 持续时间 单位/秒 |
| animation-delay | 延迟 单位/秒 |
| animation-timing-function | 时间曲线 |
| animation-iteration-count | 循环次数，默认只会执行一次 infinite为无限次 |
| nimation-direction | 动画方向，可以设置成来回交替播放 |
| animation-fill-mode | 当动画完成时，或当动画有延迟时，要应用的规则 |
解析：
动画默认只会执行一次，如果想无限循环执行下去，请设置 animation-iteration-count:infinite
animation: move 3s infinite;
动画默认只会朝着一个方向执行，即使设置了多次循环，动画依然是用一个方向，如果想设置来回交替，请设置animation-direction:alternate
animation: move 3s infinite alternate;
这是默认的效果（动画一直朝同一个方向运动）
这是来回交替的效果
默认情况下，动画完成最后一帧后，会立刻回到默认的样式。可以通过animation-fill-mode进行设置
| 属性值 | 说明 |
|---|---|
| none | 动画完成回到原先的样式（默认） |
| forwards | 停留到动画100%时的状态，如果没有100%时的关键帧，则回到原先的样式 |
| backwards | 如果动画有延迟，元素会马上渲染成0%设置的样式 |
| both | 相当于（forwards + backwards）都保留 |
animation: move 6s 1s 2 both;
默认效果：
backwards或者both效果：
5.用js控制播放
可以控制animation-play-state属性来控制动画的播放与暂停
注释：Internet Explorer 9 以及更早的版本不支持 animation-play-state 属性。
它有2个值：
running - 播放
paused - 暂停
当鼠标移入时暂停动画，鼠标移除则继续执行动画
<body>
<div class="big">
<div class="box"></div>
</div>
</body>
- 通过操作内联样式来空中动画播放与暂停
<script>
var big = document.querySelector('.big')
var box = document.querySelector('.box')
big.addEventListener('mouseenter',function(){
//暂停动画
box.style.animationPlayState="paused"
})
big.addEventListener('mouseleave',function(){
//暂停动画
box.style.animationPlayState = 'running'
})
</script>
- 通过添加移除类名来控制动画
.animate_paused {
animation-play-state: paused;
}
<script>
//通过操作内联样式来空中动画播放与暂停
var big = document.querySelector('.big')
var box = document.querySelector('.box')
big.addEventListener('mouseenter',function(){
//暂停动画
box.classList.add('animate_paused')
})
big.addEventListener('mouseleave',function(){
//暂停动画
box.classList.remove('animate_paused')
})
</script>
效果：鼠标移入暂停，鼠标移出继续动画
6.动画事件
| 事件名称 | 说明 |
|---|---|
| animationstart | 动画开始时触发 |
| animationend | 动画结束时触发 |
div.addEventListenner("animationstart",function(){
console.log("animationstart")
})
div.addEventListenner("animationend",function(){
console.log("animationend")
})
7.实例（文本滚动）
在门户网站中经常看到新闻以滚动的形式呈现给用户，这里使用css3动画做出这个效果
- 1.外层使用div，设置固定的宽度，并且overflow:hidden
- 2.新闻文本必须只占一行，并且宽度由内容撑开，这里使用p标签，通过设置display: inline-block，禁止文本换行white-space：nowrap,这样文本超出容器也不会换行，而行内块元素的宽度又是由内容撑开的，所以这样一来，所有的文本都会在同一行显示，而标签的宽度也能自适应
- 3.使用动画让span标签进行位移，位移的大小就是translateX(-100%)，并且设置时间曲线设置为linear（平滑）
<body>
<div class="new_box">
<p>滚动文本....</p>
</div>
</body>
<style>
.new_box {
width:300px;
overflow: hidden;
margin: 50px auto;
}
@keyframes roll {
from{
transform: translateX(0);
}
to{
transform: translateX(-100%);
}
}
.new_box > p {
/* 注意：行内元素无法应用transform: translateX */
display: inline-block;
white-space: nowrap;
animation: roll 20s infinite linear;
}
</style>
效果图：
CSS3 过渡和动画的更多相关文章
- CSS3 过渡、动画、多列、用户界面
CSS3 过渡.动画.多列.用户界面 transition过渡 transition: transition-property transition-duration transition-timin ...
- 从零开始学习前端开发 — 15、CSS3过渡、动画
一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...
- CSS3过渡与动画
一.CSS3 过渡 transition-property 规定过渡效果的 CSS 属性名 -webkit-transition-property: none / all / property; -m ...
- css3 -- 过渡与动画
1.注意使用前缀 2.属性: transition-property:none/all/属性 3.持续时间: transition-duration:默认值是0,即使是负值,按照0进行处理 4.tra ...
- 重新想，重新看——CSS3变形，过渡与动画①
学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着 ...
- CSS3过渡、变形和动画
1.CSS3过渡 所谓CSS3过渡,就是使用CSS3让元素从一种状态慢慢转换到另一种状态.如鼠标的悬停状态就是一种过渡.如下例子: #content a{ text-decoration: n ...
- CSS3学习（CSS3过渡、CSS3动画）
CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加 ...
- 重新想，重新看——CSS3变形，过渡与动画④
最后,我们来探讨一下CSS3的动画属性. 之前提到过,实际上过渡也算作动画的一种.但过渡作为动画的缺陷在于,只能使元素属性从一个值“过渡”至另一个值,但如果想要使元素的属性值根据需要在时间轴上不断变化 ...
- css3的过渡、动画、2D、3D效果
浏览器的内核: 谷歌的内核是:webkit 火狐的内核是:gecko Ie的内核是:trident 欧鹏的内核是:presto 国内浏览器的内核:webkit css3针对同一样式在不同的浏览器的兼容 ...
- css3过渡动画 transition
transition CSS3 过渡是元素从一种样式逐渐改变为另一种的效果. 要实现这一点,必须规定两项内容: 指定要添加效果的CSS属性 指定效果的持续时间 例如 这是下面代码的预览界面预览界面 & ...
随机推荐
- Angular 16+ 高级教程 – 谈谈 ASP.NET Core & Angular & React 在业务开发上各自的优势和体验
前言 日常, 我的开发都围绕着 ASP.NET Core 和 Angular. 这篇想聊聊它们各自的特点和解决问题的方式. 以及最重要的, 我们该在什么时候采用何种方案更为妥当. 浅谈项目分类 我一般 ...
- ASP.NET Core – Thread, Task, Async 线程与异步编程
前言 平常写业务代码, 很少会写到多线程. 久了很多东西都忘光光了. 刚好最近在复习 RxJS. 有一篇是讲 scheduler 的. 会讲到 JavaScript 异步相关的资讯. 既然如此那就一次 ...
- SQL通用语法与分类
通用语法 1.SQL可以单行或多行书写,以分号结尾. 2.MySQL数据库的SQL语句不区分大小写,关键字建议使用大写. 3.注释 1)单行注释: -- 注释内容 或 # 注释内容(MySQL特有) ...
- 【QT界面美化】QT界面美化效果截图QSS+QML
贴几个QT做的界面美化效果截图. 先来一张动图,有一些画面是QT Widgets + QSS实现的:另外一些画面是QT QML实现的. QT界面美化效果图QT QSS QML 补天云QT技术培训专家 ...
- 单Master节点的k8s集群部署-完整版
K8S 安装步骤 一.准备工作 1.准备三台主机(一台Master节点,两台Node节点)如下: 角色 IP 内存 核心 磁盘 Master 192.168.116.131 4G 4个 55G Nod ...
- pip下载太慢，换源
1.安装pqi pip install pqi 2.改变pip源 比如换成清华源: pqi use tuna 3.显示当前源
- 在 Exchange Server 中配置特定于客户端的消息大小限制
在 Exchange Server 中配置特定于客户端的消息大小限制 微软官方详细文档如下: https://learn.microsoft.com/zh-cn/exchange/architectu ...
- 鸿蒙 NEXT 如何使用 @Styles 装饰器来优化我的组件代码？
大家好,我是 V 哥.在鸿蒙 NEXT 开发中,@Styles 装饰器是一种非常有用的方法,用于定义可重用的样式.这使得开发者可以将多条样式设置提炼成一个方法,以便在多个组件中复用,从而提高代码的可维 ...
- KubeSphere 3.3.2 版本正式发布！
距离上一个版本 v3.3.1 发布,已经过了 3 个多月,今天我们很高兴宣布 KubeSphere v3.3.2 正式发布! 此版本由 68 位贡献者参与代码提交,感谢各位贡献者对 KubeSpher ...
- 云原生爱好者周刊：你对 K8s 集群升级有信心吗？
开源项目推荐 GoNoGo 在 Kubernetes 集群中,有多种因素会影响到附加组件的升级成功率,比如某些组件只支持特定的 API 或者特定的 Kubernetes 版本,某些组件废弃了特定的 a ...