Using @keyframes rules, you can create animations.
Animations are created by gradually changing from one CSS style setting to another.
During the animation, you can change the CSS style settings multiple times.
Specify when the change occurs using %, or the keywords "from" and "to", which are the same as 0% to 100%.
0% is the beginning of the animation, 100% is when the animation is complete.
For best browser support you should always define selectors with 0% and 100%.
Note: Use the animation property to control the appearance of the animation, and also use selectors to bind animations.
The Transform property applies a 2D or 3D transformation to the element. This property allows you to rotate, scale, move, skew, etc. the element.
The opacity property sets the transparency level of an element.
.shanshuo
{ width:10px; height:10px; background:red; position:relative; animation:mydeamon 1s infinite;//The value of 1s completes the animation within one second -webkit-animation:mydeamon 1s infinite; /* Safari and Chrome */ }
@keyframes mydeamon
{ 0% { transform:scale(3);//scale represents the flickering body shape change, and other tilting and other styles can search for themselves opacity: 1;//Transparency } 100% { transform:scale(1); opacity: 0; } }
<div class=""mydeamon></div>