.teaser { opacity: 0; transition: opacity 1s ease-out 0.2s, transform 1.2s ease-out 0.4s; transform: translate3d(0, 75px, 0); } .teaser.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } .lefter { opacity: 0; transition: opacity 1s ease-out 0.2s, transform 0.7s ease-out 0.2s; transform: translate3d(-35%, 0, 0); } .lefter.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } .righter { opacity: 0; transition: opacity 1s ease-out 0.2s, transform 0.7s ease-out 0.2s; transform: translate3d(35%, 0, 0); } .righter.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } .riser { opacity: 0; transition: opacity 2s ease-out 0.2s, transform 0.7s ease-out 0.2s; transform: translate3d(0, 35%, 0); } .riser.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } .riser2 { opacity: 0; transition: opacity 2.5s ease-out 0.2s, transform 1s ease-out 0.2s; transform: translate3d(0, 35%, 0); } .riser2.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } @media (min-width: 501px) { .data-text1 { transition: all 1s; transform: scale(1.5); opacity: 0; } .data-text1 span { transition: all 1s; } .data-text1 span:nth-child(2n) { opacity: 0; transition-delay: 2s; transition: all 5s; } .data-text1.on { transform: scale(1); opacity: 1 !important; } .data-text1.on span { opacity: 1 !important; transition: all 5s; } } .data-word { transition: all 2s; transform: scale(1.5); opacity: 0; } .data-word span { transition: all 5s; } .data-word span:nth-child(2n) { opacity: 0; transition: all 5s; } .data-word.is-visible { transform: scale(1); opacity: 1 !important; } .data-word.is-visible span { opacity: 1 !important; transform-origin: center; transition-delay: 5s; transition: all 5s; }