+1 vote
by
.body-breack{
// background-image:url('../images/4.jpg');
background-color:#1CA8DD;
color:#fff;
span.glyphicon.glyphicon-cog{
font-size:100px;
&:before{
-webkit-animation: animateCog 3s linear 0s infinite normal;
-moz-animation: animateCog 3s linear 0s infinite normal;
animation: animateCog 3s linear 0s infinite normal;
}
}
.header{
width:100%;
height:100%;
position:relative;
display: table;
.wrap{
padding:0 20px;
width:100%;
height:100%;
display: table-cell;
text-align: center;
vertical-align: middle;
}
}
h1{
font-weight:bold;
font-size:50px;
padding:10px 0 10px 0;
}
h4{
padding:5px 0;
}
a{
color:#5CE8FF;
}
}

@keyframes animateCog {
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
@-webkit-keyframes animateCog {
0%{
-webkit-transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(360deg);
}
}

@-moz-keyframes animateCog {
0%{
-moz-transform:rotate(0deg);
}
100%{
-moz-transform:rotate(360deg);
}
}
Anymorethese the pseudo-element, everything works in IE 10, Chrome, Opera, Yandex does not work in Safari(I have a child maybe that's why) and FireFox, FireFox finds itself the animation does not cancel, it just does not start chtoli...

1 Answer

0 votes
by
 
Best answer
try to &:before{ ... add display: inline-block;
...