애니메이션 실습

index.html

  <header class="section">
    <!-- container -->
    <div class="container">
      <h1>Website Title</h1>
      <p class="hide-small">Website slogan included here.</p>

      <nav class="site-nav">
        <ul class="group">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Portfolio</a></li>
          <li class="hide-small"><a href="#">FAQs</a></li>
          <li class="hide-small"><a href="#">Links</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </nav>
    </div>
    <!-- /container -->

  </header>

  <div class="content-area section">

    <!-- container -->
    <div class="container flexbox">

      <!-- col -->
      <div class="main-area">

        <h2>Welcome to the page!</h2>

        <!-- row -->
        <div class="boxes">
          <!-- box-a -->
          <div class="box-a">
            <p>Key feature 1</p>
          </div>
          <!-- box-a -->
          <div class="box-a">
            <p>Key feature 2</p>
          </div>
          <!-- box-a -->
          <div class="box-a">
            <p>Key feature 3</p>
          </div>
          <!-- box-a -->
          <div class="box-a">
            <p>Key feature 4</p>
          </div>
        </div>


        <img src="https://learnwebcode.github.io/Web-Design-for-Beginners/star.png" class="star">

      </div>
      <!-- /col -->

      <!-- 사이드바 -->
      <div class="sidebar">
        <h3>Sidebar Heading</h3>
        <p>Sidebar Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Lorem
          ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
          dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
          ea commodo consequat.</p>

        <p>Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Lorem ipsum dolor sit
          amet, consectetur adipisicing elit, sed do eiusmod.</p>
      </div>

    </div>
    <!-- /container -->

  </div>

  <footer>
    <p>&copy; 2017 - This is the footer.</p>
  </footer>

screen.css

@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

html {
  background-color: #608699;
  line-height: 1.7;
}

body {
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 15px;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
}

/* Main Column Typography */
.main-area h2 {
  font-size: 165%;
  font-weight: normal;
}

.section {
  padding-left: 40px;
  padding-right: 40px;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  overflow: hidden;
}

@media screen and (min-width: 1280px) {
  body {
    font-size: 16px;
  }

  .container {
    max-width: 1200px;
  }
}

@media screen and (max-width: 767px) {
  .section {
    padding-left: 20px;
    padding-right: 20px;
  }
}

header {
  padding-top: 20px;
  color: #fff;
  background-color: #405c71;
}

header h1 {
  margin: 0;
  font-weight: normal;
  font-size: 165%;
}

header p {
  font-size: 90%;
  margin: 0;
}

/* Site Navigation */
.site-nav {
  margin-top: 20px;
}

.site-nav ul {
  margin: 0;
  padding: 0;
}

.site-nav li {
  list-style: none;
  float: left;
  margin-right: 5px;
}

.site-nav a {
  display: block;
  color: #fff;
  padding: 10px 20px;
  background-color: #365267;
  transition-property: color, background-color;
  transition-duration: 2s;
}

.site-nav a:hover {
  background-color: #fff;
  color: #2c465a;
}

@media screen and (max-width: 1023px) {
  .site-nav li {
    width: 33.332%;
    margin-right: 0;
  }

  .site-nav a {
    padding: 15px 0;
    margin-right: 5px;
    margin-bottom: 5px;
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .site-nav li {
    width: 50%;
  }
}

/* End Site Navigation */

.content-area {
  background-color: #fff;
  padding-bottom: 40px;
  padding-top: 40px;
}

@media screen and (max-width: 767px) {
  .content-area {
    padding-top: 20px;
  }
}

.flexbox {
  display: flex;
}

.main-area {
  flex-basis: 66%;
  padding-right: 40px;
  box-sizing: border-box;
}

.sidebar {
  flex-basis: 34%;
  color: #555;
  font-size: 85%;
}

.sidebar h3 {
  font-size: 138.5%;
  margin-bottom: 7px;
}



@media screen and (max-width: 767px) {
  .hide-small {
    display: none;
  }
  .flexbox {
    display: block;
  }
  .main-area{
    padding-right: 0;
  }
}

.boxes {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Bounce 애니메이션 */
@keyframes fadeBounce {
  0% {
    opacity: 0;
    transform: translateY(-200%);
  }
 
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.box-a {
  flex-basis: 100%;
  opacity: 0;
  /* animation: fadeBounce 1s forwards; */
  animation-name: fadeBounce;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  background-color: #e7eff5;
  padding: 20px 20px 0 20px;
  border: 2px solid #d3dee7;
  margin-bottom: 30px;
  box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.boxes :nth-child(2){
  /*animation-delay: 0.5s;*/
}



/* Star 애니메이션 */
@keyframes slideSpin {
  50% {
    transform: translateX(150%) scale(0.5);
  }

  75% {
    transform: translateX(150%) rotate(180deg) scale(0.5);
  }

  100% {
    transform: translateX(300%) rotate(180deg);
  }
}

.star {
  animation: slideSpin 2s infinite alternate;
  width: 25%;
  height: auto;
}

@media screen and (min-width: 1280px) {
  .box-a{
    flex-basis: 42%;
  }
}

footer {
  text-align: center;
  font-size: 85%;
  color: #fff;
  padding-bottom: 20px;
  padding-top: 20px;
}

바운스 애니메이션 채우기

 40% {
    transform: translateY(0);
  }

  55% {
    transform: translateY(-6px);
  }

  70% {
    opacity: 1;
    transform: translateY(0);
  }

  85% {
    transform: translateY(-3px);
  }

참고
https://www.youtube.com/watch?v=ru5FGYuycwY&list=PLKvVQ9ZQzjVkwahMynnQuY0E_ohMtzBxn&index=6