title: IF statement fade in text css
body: <p>I am trying to create the equivalent of an IF statement in CSS. I have a small circle rotating around a larger circle. When the smaller circle reaches each of the points i want to fade in text in the centre. </p>
  
  <p>Not sure if it's possible using CSS to say, when the small circle reaches x/y point then activate fade in text animation. </p>
  
  <p><a href="https://i.stack.imgur.com/WCryk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WCryk.png" alt="enter image description here"></a></p>
  
  <pre><code>@keyframes clockwiseRotate {
      from {
          transform: rotate(0deg)
      }
  
      to {
          transform: rotate(360deg)
      }
  }
  
  @keyframes counterClockwiseRotate {
      from {
          transform: rotate(0deg)
      }
  
      to {
          transform: rotate(-360deg)
      }
  }
  
  i {
      animation: counterClockwiseRotate 25s linear infinite
  }
  
  
  body {
      background-color: #022052;
  }
  
  .circle1{
      border: 1px solid #0462FF;
      width: 350px;
      height: 350px;
      position: absolute;
      left: 24.3%;
      top: 30px;
      border-radius: 50%;
  }
  
  .link{
      color:#fff;
      width:20px;
      height: 20px;
      border-radius:50%;
      border:1px solid #444;
      position: absolute;
      text-align: center;
      line-height:33px;
  }
  
  .fb{
      background:#0462FF;
      border-color:#0462FF;
      transform:translate(40px,40px);
  }
  
  .cp{
      background:#0462FF;
      border-color:#0462FF;
      transform:translate(285px,40px);
  }
  
  .li{
      background:#0462FF;
      border-color:#0462FF;
      transform:translate(300px,270px);
  }
  
  .tw{
      background:#0462FF;
      border-color:#0462FF;
      transform:translate(25px,270px);
  }
  
  .an{
      background:#0462FF;
      border-color:#0462FF;
      transform:translate(25px,270px);
  }
  
  .circle2{
      border: 1px solid #0462FF;
      width: 350px;
      height: 350px;
      position: absolute;
      left: 24.3%;
      top: 30px;
      border-radius: 50%;
      animation: clockwiseRotate 25s linear infinite;
  }
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" &gt;
  
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Rotating circle&lt;/title&gt;
  &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
  rel="stylesheet"&gt;
  
  &lt;link rel='stylesheet prefetch' 
  
  href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/
  materialize.min.css'&gt;
  
  &lt;link rel="stylesheet" href="css/style.css"&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;ul class="circle2"&gt;
  
  &lt;li class="link an"&gt;&lt;i class="an an-new"&gt;&lt;/i&gt;&lt;/li&gt;
  
  
  &lt;/ul&gt;
  
  &lt;ul class="circle1"&gt;
  
  
  
  &lt;li class="link fb"&gt;&lt;i class="fa fa-facebook"&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li class="link tw"&gt;&lt;i class="fa fa-twitter"&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li class="link li"&gt;&lt;i class="fa fa-linkedin"&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li class="link cp"&gt;&lt;i class="fa fa-codepen"&gt;&lt;/i&gt;&lt;/li&gt;
  
  
      &lt;/ul&gt;
  
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>