Usé la transición CSS para crear el efecto de animación Fade Up. Aquí está el código:
.animation-up{ opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); -webkit-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease; -webkit-transition: -webkit-transform .6s ease; transition: -webkit-transform .6s ease; -o-transition: transform .6s ease; transition: transform .6s ease; transition: transform .6s ease,-webkit-transform .6s ease; } .animation-up.active { opacity: 1; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); }Para agregar activo al bloque que usé:
function animations() { appear({ elements: function elements(){ return document.getElementsByClassName('appear'); }, appear: function appear(el){ var item = $(el); item.addClass('active'); }, bounds: 0, reappear: true }); }Y esta animación funciona bien en Firefox, Opera y, por supuesto, Chrome. Pero hay algún problema en el iPhone. Aquí hay un ejemplo: https://gyazo.com/1bd0bdb42fd7d043b404cd868b35e90b como puede ver el bloque Fade Up pero luego desaparece y vuelve a aparecer. ¿Quizás el JavaScript causa el problema?
Hay múltiples propiedades CSS de transición y la última sobrescribirá las anteriores. Puede separar con comas los objetivos de transición de esta manera:
transition: width 2s, height 4s;Así que en tu ejemplo sería
-webkit-transition: opacity 1s ease, transform .6s ease; -o-transition: opacity 1s ease, transform .6s ease; transition: opacity 1s ease, transform .6s ease;