CSS聊聊animation
Posted GHUIJS
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS聊聊animation相关的知识，希望对你有一定的参考价值。
前言
前端开发经常需要增加一些交互动画来提高用户体验，这就是css animation属性派上用场的时候了。
属性总览
| animation-name | 指定要绑定到选择器的关键帧的名称 |
| animation-duration | 动画指定需要多少秒或毫秒完成 |
| animation-timing-function | 设置动画将如何完成一个周期 |
| animation-delay | 设置动画在启动前的延迟间隔。 |
| animation-iteration-count | 定义动画的播放次数。 |
| animation-direction | 指定是否应该轮流反向播放动画。 |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 |
| animation-play-state | 指定动画是否正在运行或已暂停。 |
| initial | 设置属性为其默认值。 阅读关于 initial的介绍。 |
| inherit | 从父元素继承属性。 阅读关于 initinherital的介绍。 |
tips:拷贝自菜鸟教程，方便以后点击链接查看各个属性细节。
用animation模仿向下滑出的弹框
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
*
padding: 0;
margin: 0;
.target
width: 100vw;
height: 100vh;
position: fixed;
left: 0;
top: 0;
background: red;
transform: translateY(100vh);
.target-in
animation: test .25s ease forwards;
transform: translateY(100vh);
@keyframes test
from
transform: translateY(100vh);
opacity: 0;
to
transform: translateY(0);
opacity: 1;
</style>
</head>
<body>
<button>按钮</button>
<div class="target"></div>
</body>
<script type="text/javascript">
const dom = document.querySelector('.target')
document.querySelector('button').addEventListener('click',() =>
dom.classList.remove('target-out')
dom.classList.add('target-in');
dom.style.display = 'block';
);
</script>
</html>以上是关于CSS聊聊animation的主要内容，如果未能解决你的问题，请参考以下文章