Я реализовал эффект box-shadow в div с помощью анимации CSS3... Код отлично работает в Firefox и Chrome, но я не знаю, почему мой код не работает в Safari и Opera...
Версия Safari, которую я использую 5.1.7...
и Opera версии 12.12...
Мой код:
@-moz-keyframes glowz {
0% { -moz-box-shadow:0px 0px 10px 10px rgba(64,142,0,1); }
33% { -moz-box-shadow:0px 0px 7px 7px rgba(64,142,0,1); }
66% { -moz-box-shadow:0px 0px 2px 2px rgba(64,142,0,1); }
100% { -moz-box-shadow:0px 0px 9px 9px rgba(64,142,0,1); }
}
@-webkit-keyframes glowz {
0% { -webkit-box-shadow:0px 0px 10px 10px rgba(64,142,0,1); }
33% { -webkit-box-shadow:0px 0px 7px 7px rgba(64,142,0,1); }
66% { -webkit-box-shadow:0px 0px 2px 2px rgba(64,142,0,1); }
100% { -webkit-box-shadow:0px 0px 9px 9px rgba(64,142,0,1); }
}
@-o-keyframes glowz {
0% { -o-box-shadow:0px 0px 10px 10px rgba(64,142,0,1); }
33% { -o-box-shadow:0px 0px 7px 7px rgba(64,142,0,1); }
66% { -o-box-shadow:0px 0px 2px 2px rgba(64,142,0,1); }
100% { -o-box-shadow:0px 0px 9px 9px rgba(64,142,0,1); }
}
@keyframes glowz {
0% { box-shadow:0px 0px 10px 10px rgba(64,142,0,1); }
33% { box-shadow:0px 0px 7px 7px rgba(64,142,0,1); }
66% { box-shadow:0px 0px 2px 2px rgba(64,142,0,1); }
100% { box-shadow:0px 0px 9px 9px rgba(64,142,0,1); }
}
.blinker {
background-color: #FF0000;
display: block;
height: 27px;
position: absolute;
width: 27px;
left:50%; top:50%;
border-radius: 5em; -webkit-border-radius: 5em; -moz-border-radius: 5em; -o-border-radius: 5em;
-ms-animation: 5s ease-in-out 0s alternate none infinite glowz;
-webkit-animation: 5s ease-in-out 0s alternate none infinite glowz;
-moz-animation: 5s ease-in-out 0s alternate none infinite glowz;
-o-animation: 5s ease-in-out 0s alternate none infinite glowz;
animation: 5s ease-in-out 0s alternate none infinite glowz;
}
Анимация css3 глючит в сафари и опере??