css 动画 transition和animation
本文参考:http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
1. transition基本用法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body,
html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
img {
width: 50px;
height: 50px;
display: block;
margin: auto;
transition: 1s; //如果不使用 transition 鼠标移到img 上面时是马上变化的,加上这个属性,变化就会持续一秒的过程
}
img:hover {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<img src="./o_200404110308weixin_20191025171935.jpg" alt="" />
</body>
</html>
我们还可以指定 height 或者 width 等属性的变化
img {
width: 50px;
height: 50px;
display: block;
margin: auto;
transition: 1s height;
}
这种写法表示只有 img 的height 有持续1s 的过度属性,如果想高度变化在变化宽度,可以指定delay参数
img {
width: 50px;
height: 50px;
display: block;
margin: auto;
transition: 1s height, 1s 1s width;
}
transiton 的状态变化速度默认不是匀速的,而是逐渐放慢的,这叫做 ease
img {
width: 50px;
height: 50px;
display: block;
margin: auto;
transition: 1s height, 1s 1s width ease;
}
除了可以取值ease 以外,还有其他模式
1. linear : 匀速
2.ease-in: 从慢到快
3.ease-out: 从快到慢
4.cubic-bezier函数:自定义速度模式
cubic-bezier可以用工具网址:https://cubic-bezier.com/#.17,.67,.83,.67 来定制
img{
transition: 1s height cubic-bezier(.83,.97,.05,1.44);
}
使用transition 的注意事项:
1.目前各大浏览器都已经支持无前缀的 transition ,所以可以很安全的使用
2.不是所有css 属性都支持 transition
3. transition 需要明确知道开始状态和结束状态的具体数值,也就是说如果开始或结束的设置是 height:auto,那么不会产生动画效果,类似的情况还有, display:none到 block background:url(foo,jpg)到url(bar.jpg)等等
transition 的局限:
1. transiton 需要事件触发,所以没办法在网页加载时自动触发
2.transition 是一次性的,不能重复发生,除非一再触发
3.transition 只能有两个状态
2.Animation
首先,css Anmiation 需要指定动画一个周期持续时间
.donghua {
animation: 1s rainbow;
}
上面的代码表设计,给.donghua 这个class 添加一个 动画,我们需要定义动画的rainbow 动画效果
@keyframes rainbow {
0% {
background: red;
}
50% {
background: orange;
}
100% {
background: yellowgreen;
}
触发动画
<div id="div1"></div>
<button onclick="donghua()">点我</button>
<script>
let div1 = document.getElementById('div1')
function donghua() {
div1.classList.add('donghua')
}
</script>
默认情况下,动画只能播放一次,加入 infinite 关键可以让动画无限播放
.donghua {
animation: 1s rainbow infinite;
}
也可以指定动画具体播放次数
.donghua {
animation: 1s rainbow 3;
}
动画结束以后,会立即从结束状态跳回起始状态。如果想让动画保持在结束状态可以使用
animation-fill-mode属性。
.donghua {
animation: 1s rainbow forwards;
}
animation-fill-mode 的其他值
1. none :默认值,回到动画没开始的状态
2.backwards : 让动画回到第一帧的状态
3.forwars : 结束状态
有时,动画播放过程中突然停止,这时,默认跳回到动画开始时的状态,如果想要动画保持结束的位置,可以使用 animation-play-state属性
.donghua {
animation: 1s rainbow infinite;
animation-play-state: paused;
}
.donghua:hover {
animation-play-state: running;
}
最新文章
- SharePoint文档库文件夹特殊字符转义
- bug注意事项记录
- 【资源集合】94个iOS开发资源推荐,帮你加速应用开发
- iOS-UITouch,UIEvent使用介绍
- (原)vs2013编译成静态库
- 安装基于 Linux 发行版的重要事项(流程指引)
- xml的SAX解析规则
- 自学python之路(day3)
- SpringBoot启动源码探究----configureHeadlessProperty()方法
- video.js使用
- CentOS-7.2安装Ambari-2.6.1
- 基于TDA4863-2的单级PFC反激LED电源设计与仿真
- 转载:浅析@PathVariable 和 @RequestParam
- ZJOI 2015 幻想乡战略游戏(动态点分治)
- Python 基础语法+简单地爬取百度贴吧内容
- Zipper(poj2192)dfs+剪枝
- linux mount
- 关于Bigdecimal比较大小
- 20170706xlVBA根据工资汇总表生成个人工资条
- pycharm 调试Django 奇葩问题:Process finished with exit code -1073741819