Сообщение от Блондинка
|
То самое, что я не могла найти, всё супер.
|
Если вы хотели добавить префиксы, то вам ещё нужно добавить -webkit-border-radius и -moz-border-radius.
Однако свойств -ms-animation, правила @-ms-keyframes и функции -ms-radial-gradient никогда в никаком браузере не существовало!
Также свойства -moz-transform, -ms-transform и -o-transform бессмысленны внутри правила @-webkit-keyframes.
Также свойства -webkit-transform, -ms-transform и -o-transform бессмысленны внутри правила @-moz-keyframes.
Также свойства -webkit-transform, -ms-transform и -moz-transform бессмысленны внутри правила @-o-keyframes.
У вас также допущена ошибка в синтаксисе функции radial-gradient
Для последних 40 версии браузеров (однако IE9+) код может выглядеть так...
#a {
width: 255px;
height: 125px;
background: #cfe6cf;
-webkit-border-radius: 15px / 12px;
border-radius: 15px / 12px;
border: 1px solid #c0c0c0;
position: absolute;
}
#b {
width: 25px;
height: 100px;
display: inline-block;
position: absolute;
top: 15px;
left: 122.5px;
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
}
#a.anim #b {
-webkit-animation: pendulum-1 1.79s linear 0s 1 normal forwards;
animation: pendulum-1 1.79s linear 0s 1 normal forwards;
}
#c {
width: 1px;
height: 75px;
background: #999;
position: absolute;
left: 12px;
}
#d {
width: 1px;
height: 1px;
background: transparent;
border-top: 15px solid transparent;
border-top-color: #000080;
position: absolute;
left: 120px;
}
#U_2e {
width: 25px;
height: 25px;
display: inline-block;
-webkit-border-radius: 50%;
border-radius: 50%;
background: -webkit-radial-gradient(60% 40%, circle, #99f, #00f);
background: -o-radial-gradient(60% 40%, circle, #99f, #00f);
background: radial-gradient(circle at 60% 40%, #99f, #00f);
position: absolute;
top: 75px;
}
@-webkit-keyframes pendulum-1 {
from {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
to {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
@keyframes pendulum-1 {
from {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
to {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}