Day - 20 (Key Frames & media )

key Frames

• the key frame is used to control the step in an animation sequences by defining css styles

• An animation is created by gradually changing from one set of css styles to another.

• during an animation,you can change the set of css styles many time
  

<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: mymove 5s infinite;
}

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}

• from is the starting point and to is the ending point

*@media *

• The CSS @media rule is used in media queries to apply different styles for different media types/devices.

• width and height of the viewport

• width and height of the device

• orientation (is the tablet/phone in landscape or portrait mode?)

• resolution
  

<style>
div.example {
  background-color: yellow;
  padding: 20px;
}

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}
</style>