Develop Reference

My CSS animations don't work on iOS devices

I have a CSS and JS. Its simply when I slide down to page my logo coming from left with opacity 0. Then when I came back to top again its going back and opacity being 0. Its working on computer and android phones. But on iOS devices its doesn't work. What is wrong with on my code?
Logo is coming after I slide to top it moves to the left but does not disappear. Thank you for responses .
JS:
const handleToggle = (e) => {
let brands = document.getElementsByClassName("stickyBrand"); //Its my logo.
if (e) {
Array.from(brands).forEach((el) => {
el.classList.add("fadeInLeft");
el.classList.remove("fadeOutLeft");
});
} else {
Array.from(brands).forEach((el) => {
el.classList.add("fadeOutLeft");
el.classList.remove("fadeInLeft");
});
}
};
CSS:
#keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#-webkit-keyframes fadeOutAnimationOperaSafari {
0% {
opacity: 0 !important;
-webkit-transform: translateX(0);
}
100% {
opacity: 1 !important;
-webkit-transform: translateX(-50px);
}
}
#keyframes fadeOutAnimation {
0% {
opacity: 0;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 1;
-webkit-transform: translateX(-50px);
-moz-transform: translateX(-50px);
-o-transform: translateX(-50px);
transform: translateX(-50px);
}
}

You need to add -webkit- prefixes to your transforms. On iOS, all browsers use safari webkit (because they are based on uiwebview), and currently iOS webkit only supports transforms with a prefix. What you are seeing is that the transform is always 0 throughout the animation because the non-prefixed selector is not used.

Animation effect slide (with jQuery and CSS)

I've used one template from W3 Schools in order to build a theme with Bootstrap for WordPress
http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
One feature is the animation to slide some elements within a div in the webpage as you scroll it, using jQuery.
Currently the animation is implemented only from bottom to top, but I'm struggling to implement from right to left and vice versa as well.
Here is the code already working for bottom to top animation:
jQuery(function($) {
$(window).scroll(function () {
$(".slideanim-bottom").each(function () {
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
});
});
.slideanim {
visibility: hidden;
}
.slide {
animation-name: slide;
-webkit-animation-name: slide;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
}
#keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
#-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
<div class="row slideanim-bottom">
Does anyone know how to implement the same thing for left to right and vice versa as well? I think it is just a matter of adding some code in the js.
Thanks!

Just change translateY to translateX like this:
#keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateX(70%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
#-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateX(70%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
With code above you will get animation from right to left.
If you want animation from left to right than set negative percentage.
For example: -webkit-transform: translateX(-70%);
Also, because you do horizontal animations there will be visible horizontal scroller while animation plays so you should set overflow:hidden for your cointainer. In your case it is .container-fluid class.
You can see full example on your template page here: https://jsfiddle.net/uzxbn9da/

Have you tried changing translateY to translateX?
This would most likely modify the movement from top-down to left-right. You would have to tweak the percentage values to achieve the desired effect though.
Like this:
#keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateX(70%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
#-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateX(70%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
}
}

If not clicked for 30s, apply CSS once, remove it, and re-iterate

So I have this funky little CodePen with an animation which I wish to run only if the user hasn't clicked on the <div class="someDiv"> for 30 seconds.
What I'm asking is, can anyone point me in the right direction, so when someone doesn't click on:
<div class="someDiv">
</div>
..for 30 seconds, this CSS will apply (ONCE) via appending id, similar to $(".someDiv").attr("id", "#theBounce"); and removing it in a reverse manner.
#theBounce {
background-color:red;
width:50px;
height:50px;
margin-left:auto;
margin-right:auto;
margin-top:5%;
-moz-animation: bounce 1.5s infinite;
-webkit-animation: bounce 1.5s infinite;
animation: bounce 1.5s infinite;
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
Meaning that a click will force the scripts counter to start over, and a lack of clicking for 30s will apply the CSS for at least 1,5s, and then remove it, and then start the timer. It might be my Googling skills at fault here, but I just can't figure out how to make this work. It's the timing/reset on click part I haven't figured out really.
A link, an idea, a suggestion. I'll be happy for all of it. Thanks.

I suggest you use setTimeout.
On document load start your setTimeout by defining a variable equal to the timer which after a certain number of milliseconds adds your content. Then redefine your timer variable to a new setTimeout for a new amount of milliseconds.
var myTimer;
myTimer = setTimeout(function(){ /*do stuff after 3 seconds*/ }, 3000);
Then if someone does something to stop the timer you can stop the timer by:
clearTimeout(myTimer);
Here's an example:
(function () {
var myTimer,
announce = document.getElementById("announcement"),
button = document.getElementById("stopIt");
function firstTimer () {
announcement.innerHTML = '';
myTimer = setTimeout(function () {
populateContent();
}, 500);
}
function populateContent () {
announcement.innerHTML = 'push the button!!';
myTimer = setTimeout(function () {
firstTimer();
}, 500);
}
button.addEventListener('click', function () {
clearTimeout(myTimer);
});
firstTimer();
}());
#announcement {
border: 1px solid red;
height: 5ex;
width: 30%;
}
<div id="announcement"></div>
<button type="button" id="stopIt">Stop!!</button>

I'm not an expert, so someone may have a better answer, but you can use the setTimeout function in Javascript to do this, I think.
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout
The first example on that page seems similar to what you'd want, here's an untested suggestion:
HTML:
Live Example
Set CSS bounce after 30 seconds
Reset timer
Javascript:
var timeoutID;
function setBounce() {
timeoutID = window.setTimeout(bounceIt, 30000);
}
function bounceIt() {
// Code to find the bounce div, apply the CSS style to it,
// and then add a new timeout on the CSS to remove the style after 1.5s
}
function unbounceIt(bounceTimeoutID) {
window.clearTimeout(bounceTimeoutID);
}
function resetBounceTimer() {
window.clearTimeout(timeoutID);
}
Hopefully this is a step in the right direction

CSS3 animate slide left to right and right to left toggling

So basically I have a process with multiple steps that users will go through. Whenever they click a forward button, I want to slide the current step to the left and slide the next step on from right to left. When hitting backwards, I want the current step to slide off to the right and the previous step to slide in from the left. I have it working so it correctly does the slide on the first click both ways, the problem arrives when I basically try to toggle it (so clicking on forward, then back). When I do this, the thing will slide off correctly, but the previous step does not slide back on, leaving a blank content area. This is the state of the classes once you hit forward first, then hit back:
Here's my animation CSS:
#keyframes slide-in-from-left {
0% { tranform: translate(-100%); }
100% { transform: translateX(0%); }
}
#keyframes slide-out-left {
0% { transform: translateX(0%); }
100% { transform: translateX(-100%); }
}
#keyframes slide-in-from-right {
0% { transform: translateX(100%); }
100% { transform: translateX(0%); }
}
#keyframes slide-out-right {
0% { transform: translateX(0%); }
100% { transform: translateX(100%); }
}
// Animation Classes
// ------------------------------
.slide-in-from-left {
animation: slide-in-from-left 0.5s forwards;
}
.slide-out-left {
animation: slide-out-left 0.5s forwards;
}
.slide-in-from-right {
animation: slide-in-from-right 0.5s forwards;
}
.slide-out-right {
animation: slide-out-right 0.5s forwards;
}
And then I just have:
[class^="step-"] {
position: absolute;
}
.step-4 {
transform: translateX(-100%);
}
And my jQuery/coffeescript:
goForwardAStep = () ->
step = $(this).data('step')
$('.signup .step-' + step).addClass('slide-out-left')
$('.signup .step-' + (step + 1)).addClass('slide-in-from-right')
goBackAStep = () ->
step = $(this).data('step')
$('.signup .step-' + step).addClass('slide-out-right')
$('.signup .step-' + (step - 1)).addClass('slide-in-from-left')
Should I be removing a class somewhere when the steps change? Should I have more classes involved to make sure things are laying off screen where they should?

A simpler approach. 3 clases for the state:
.current {
transform: {translateX(0%);}
}
.moved-left {
transform: {translateX(-100%);}
}
.moved-right {
transform: {translateX(100%);}
}
and a permanent one
.slide {
transition: transform 0.5s;
}

Blurred text in Chrome when CSS animations are applied

I have a problem with the animated text on my website. I am using the following CSS to do the animations:
#-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
#-moz-keyframes fadeInRightBig {
0% {
opacity: 0;
-moz-transform: translateX(2000px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
#-o-keyframes fadeInRightBig {
0% {
opacity: 0;
-o-transform: translateX(2000px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
#keyframes fadeInRightBig {
0% {
opacity: 0;
transform: translateX(2000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
-moz-animation-name: fadeInRightBig;
-o-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}
When .fadeInRightBig is applied to a text element it becomes blurry in Chrome as seen in the following picture. The first element has not the animation applied. Maybe it is a little hard to see due to the resizing of the image.
As far as i know this problem only exists in Chrome. In Firefox and IE the animated text is crisp.
I have tried to recreate the problem in a Fiddle (http://jsfiddle.net/DTcHh/2608/). However in this Fiddle it does not seem to be a problem.
My website is located here: http://steffanlildholdt.dk/.
Anyone having idea to what the problem can be?

On the elements that appear blurred, apply the following styles:
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;