Ионная анимация CSS не работает на устройстве Android

Я использую очень простую анимацию CSS с использованием Ionic Framework, и она отлично работает в браузере Chrome, но на устройстве нет анимации. И форма тоже выглядит по-другому. Вот мой код. Может ли кто-нибудь предположить, что с ним не так?Ионная анимация CSS не работает на устройстве Android

.container { 
    text-align: center; 
    padding:100px; 
} 
.wedge { 
    animation: rotate 4s infinite linear; 
    border-radius: 0 64px 64px 0; 
    background: green; 
    width: 32px; 
    height: 64px; 
    transform-origin: 0% 50%; 
} 

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

Вот HTML-

<div class="container"> 
    <div class="wedge"></div> 
</div>

Все это делает вращать клин 360 Degress. Но не работает на устройстве Android. Благодарю.

источник

2015-08-26 andthereitgoes

В браузере браузера по умолчанию Android открыта, поэтому он не может показать эффект перехода. Если он откроет хром-браузер, он покажет эффект. Некоторые эффекты css могут отличаться от браузера к браузеру –

, пожалуйста, добавьте пешеходный переход, Он решит вашу проблему. – Muhsin

@ Анилкумар: Извините, я не понимаю вашего ответа. Код, который я вставил, - это приложение для ионного тестирования, которое отлично работает в браузере при его создании, но не работает на устройстве Android (в качестве приложения). Вы можете объяснить свой ответ? – andthereitgoes

Вам необходимо определить свои анимации для поддержки браузера по умолчанию для Android. например, заменить @keyframes с

@ -webkit-ключевые кадры

, анимация с -webkit-анимации, преобразование с -webkit-преобразования и так далее.

Он исправил мою, и я надеюсь, что исправил ваш.

источник

2016-03-30 18:58:29

Ионная анимация CSS не работает на устройстве Android

ответ

Смежные вопросы