transition1

transition的简单例子

by Robbie Yang

HTML

<div class="container">
  <div class="circle"></div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:700');

  html,body,div {
    margin: 0;
    padding: 0;
    font-family: 'Roboto';
    text-align: center;
  }
  .container {
    position: relative;
    width: 1300px;
    height: 500px;
    font-size: 36px;
    text-transform: uppercase;
    background-color: #f0f0f0;
  }

  .circle {
    position: relative;
    top: 0px;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border-radius: 0px;
    background-color: #4dd5f76c;
    transform: scale(0.01)
  }
  .container:hover .circle{
    animation: dropdown 5s ease-out forwards infinite;
  }

  @keyframes dropdown {
    0% { 
      top: 0px;
      border-radius: 0px;
      transform: scale(0.01)
    }
    50% {
      top: 200px;
      border-radius: 50px;
      background-color: #ffa6008f;
      transform: scale(1)
    }
    100% { 
      top: 0px;
      border-radius: 200px;
      background-color: #ff0000;
      transform: scale(0.01)
    }
  }