CSS微动画 - 弹窗也要很动感，动画不能只做一半

Q: 9月的最後一天来点特别的吧？
A: 常见的弹窗来一个！

样式先做好是很重要的！

首先来个简易的按钮.btn-open来开启弹窗，然後在弹窗内有个关闭按钮可以关掉弹窗。

<style>
  .btn-open {
    width: 200px;
    color: white;
    line-height: 50px;
    text-align: center;
    background-color: brown;
    border-radius: 10px;
    cursor: pointer;
  }
  .container {
    width: 320px;
    border-radius: 10px;
    overflow: hidden;
  }
  .title {
    position: relative;
    padding: 5px 0;
    font-size: 30px;
    text-align: center;
    color: white;
    background-color: DarkOrange;
  }
  .btn-close {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 12px;
    cursor: pointer
  }
  .content {
    padding: 30px;
    background-color: Bisque;
  }
</style>
<div class="btn-open" onclick="addActive()">Open Popup</div>

<div id="container" class="container">
  <div class="title">
    Title
    <div class="btn-close" onclick="removeActive()">Close</div>
  </div>
  <div class="content">Content</div>
</div>

再来要让弹窗表演了

再开启弹窗时在#container新增.is-active，而为了让弹窗弹出来时有Ｑ弹的感觉，这里对弹窗下animation。

<script>
  function removeActive() {
    document.getElementById('container').classList.remove('is-active')
  }
  function addActive() {
    document.getElementById('container').classList.add('is-active')
  }
</script>

<style>
  .is-active.container {
    animation: popup 0.5s;
  }
  @keyframes popup {
    0% {transform: scale(0);}
    20% {transform: scale(1.1);}
    50% {transform: scale(0.95);}
    80% {transform: scale(1.05);}
    100% {transform: scale(1);}
  }
</style>

弹窗应该是从无到有的

对於弹窗来说比较常见的情况会是原本没有，在进行操作後显示，为了隐藏元素比较直觉会使用display: none让元素不显示，但这里希望弹窗可以弹的美也缩的漂亮，改使用transform: scale(0)将元素缩小至0倍，在画面上也就看不到啦！

<style>
  .container {
    transform: scale(0);
  }
  .is-active.container {
    transform: scale(1);
  }
</style>

弹出来是有了，但怎麽关闭的时候直接消失了？

当弹窗弹出时有animation演绎弹出的效果，但当.is-active被移除时，元素就是从transform: scale(1)直接变成transform: scale(0)，所以这时候如果也需要有缩小到不见的感觉时，最一开始使用的transition就派上用场了。

<style>
  .container {
    transition: .1s;
  }
</style>

今天介绍到这里～明天要来继续炸脑袋想灵感啦！

如果有写错的地方，欢迎点评！ 会及时改进～
如果有更好的写法，欢迎指教！ 希望各位不吝赐教～
如果想看更多效果，欢迎敲碗！ 提供示意图小编写写看～
如果内容疑似侵权，拜托告知！ 内容皆为小编理解後原创～
如果对你有点帮助，拿去用吧！