Показать сообщение отдельно
  #43 (permalink)  
Старый 14.03.2019, 03:32
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Блондинка Посмотреть сообщение
То самое, что я не могла найти, всё супер.
Если вы хотели добавить префиксы, то вам ещё нужно добавить -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);
	}
}
Ответить с цитированием