css animation opacity 0 to 1 code example

Example 1: how to make animation stay on 100%

animation-fill-mode:forwards;

Example 2: css keyframes animation

//css keyframes
#image{
	  width: 100px;
	  height: 100px;
	  background-color: red;
	  position: relative;
	  animation: monFrame 5s linear 2s infinite alternate;

	}
	@keyframes monFrame {
	  0%   {left:0px; top:0px;}
	  25%  {left:500px; top:0px;}
	  50%  {left:500px; top:500px;}
	  75%  {left:0px; top:500px;}
	  100% {left:0px; top:0px;}
     }

Example 3: make infinite keyframe

.waves {
    animation: animatedImage 5s linear infinite;
    }


@keyframes animatedImage {
    0% { left: 2000px;}
   100% { left: -2000px;}
}

Example 4: css opacity from 0 to 1

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}