CSS “Space” Animation tutorial.

February 16, 2014

We got this video for you so that you don’t need to spend your time in the search.

Image 1 – https://cdn.obsidianportal.com/assets/238943/bright-light_1.jpg
Image 2 – https://circleapp.com/site-v4/img/circle_icon.png

CSS code

@charset "utf-8";
/ * CSS document * /

body {
background color: # 200000;
}

.star{
opacity: .3;
width: 1300px;
height: 1300px;
position: absolute;
at the top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
-webkit-animation: infinite linear 10s spin;
-moz-animation: infinite linear 10s spin;
animation: infinite linear 10s spin;
z index: -1;
}
@ -moz-keyframes spin {100% {-moz-transform: rotation (360deg); }}
@ -webkit-keyframes spin {100% {-webkit-transform: rotation (360deg); }}
@keyframes spin {100% {-webkit-transform: rotation (360deg); transform: turn (360deg); }}

.circle{
width: 200px;
height: 200px;
position: absolute;
at the top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
-webkit-animation: pulsation 1s at ease;
-webkit-animation-iteration-count: infinite;
opacity: 0.5
}
@ -webkit-keyframes pulsed {
0% {-webkit-transform: scale (0,1, 0,1); opacity: 0.0;
50% {opacity: 1.0;}
100% {-webkit-transform: scale (1.2, 1.2); opacity: 0.0;}}.

This content was first published here.