CSS Heartbeat animations

1, Picture Unlimited zoom out, similar to heartbeat

CSS as follows

@keyframes Scaledraw{/*defining keyframes, Scaledrew keyframe names*/0%{Transform:Scale (1);/*start for original size*/}25%{Transform:Scale (1.6);/*zoom in 1.1 times times*/}50%{Transform:Scale (1); }75%{Transform:Scale (1.6); }        }

element in CSS to write on

-webkit-animation:scaledraw 5s Ease-in-out Infinite;

2, element or picture, like ripple diffusion animation infinite loop

HTML Section<Divclass= "Parent">         <imgsrc="...."alt="">         <span></span>         <span></span>     </Div>

CSS section. Parent{position:relative;width:200px;Height:200px; }. Parent img{width:200px;Height:200px;Z-index:0; }@keyframes biging{0%{Transform:Scale (1);Opacity:0.5; }50%{Transform:Scale (1.5);Opacity:0;/*As the circle zooms in, the opacity decreases to 0.*/}100%{Transform:Scale (1);Opacity:0.5; }}. Parent span{position:Absolute;width:100px;Height:100px; Left:0;Bottom:0;background:#fff;Border-radius:50%;-webkit-animation:biging 3s linear infinite;Z-index:-1; }. Parent Span:nth-child (2){-webkit-animation-delay:2s;/*The second span animation requires a delay of 2 seconds*/}

3. Making animated Albums

Overlapping picture controls an infinite loop of transparency of a sheet of change

@keyframes picopacit{0%{Opacity:0; }50%{Opacity:1; }100%{Opacity:0; }}. Pic2{position:Absolute;width:100px;Height:100px; Left:0;Top:0;-webkit-animation:picopacity 3s ease-in-out infinite; }

4. Loaded rotation animation

/*Load in animation*/@keyframes Rotate{0%{Transform:Rotate (0deg);-ms-transform:Rotate (0deg);/*IE 9*/-moz-transform:Rotate (0deg);/*Firefox*/-webkit-transform:Rotate (0deg);/*Safari oíchrome*/-o-transform:Rotate (0deg); }100%{Transform:Rotate (360deg);-ms-transform:Rotate (360deg);/*IE 9*/-moz-transform:Rotate (360deg);/*Firefox*/-webkit-transform:Rotate (360deg);/*Safari oíchrome*/-o-transform:Rotate (360deg); }}.notload img{position:relative;Top:. 05rem;Margin-right:3px;width:. 32rem;Height:. 32rem;-webkit-animation:rotate 2s ease-in-out infinite;}

CSS Heartbeat animations