I am using the AtomicCSS framework from acss.io, so far so good.
However, I am stuck with creating animations. The reference page is silent about it and the examples page does not deliver any examples.
https://acss.io/reference.html
https://acss.io/guides/syntax.html#examples-
Let this be a starting point of my animation and show what I am looking for(fade in):
#keyframes fadeIn {
from {
opacity: 0;
transform: translate3d(0, -20%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
try this
#keyframes fadeIn {
from {
opacity: 0;
transform: translate3d(0, -20%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
<div class="Animn(fadeIn)"></div>
Related
I am trying to build a simple animation of a beaker tipping over. Everything is working great on desktop, but both iOS Safari and chrome, when the animation starts it jumps immediately to the last key frame (100%). So this tells me the animation is firing, but for some reason it just doesn't want to well... animate.
Here is my scss code. I have an auto-prefixer, I've checked and double checked, it doesn't seem to be anything to do with -webkit. Any help would be awesome!!
/** Our Process Area Edits **/
&.our-process-title {
#our-process-svg {
width: rem-calc(150);
height: rem-calc(150);
margin: 50px auto;
transform: translateZ(0);
animation-name: beakerShake;
animation-duration: 4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-play-state: paused;
&.running {
animation-play-state: running;
}
#-webkit-keyframes beakerShake {
0% { -webkit-transform: rotateZ(0deg);}
5% { -webkit-transform: rotateZ(20deg); }
15% { -webkit-transform: rotateZ(-25deg); }
20% { -webkit-transform: rotateZ(0deg);}
40% { -webkit-transform: rotateZ(0deg);}
50% { -webkit-transform: rotateZ(5deg); }
55% { -webkit-transform: rotateZ(-10deg); }
58% { -webkit-transform: rotateZ(15deg); }
60% { -webkit-transform: rotateZ(0deg);}
65% { -webkit-transform: rotateZ(0deg);}
72% { -webkit-transform: rotateZ(30deg); }
78% { -webkit-transform: rotateZ(-35deg); }
85% { -webkit-transform: rotateZ(0deg);}
95% { -webkit-transform: rotateZ(0deg);}
100% { -webkit-transform: rotateZ(105deg);}
}
#keyframes beakerShake {
0% { transform: rotateZ(0deg);}
5% { transform: rotateZ(20deg); }
15% { transform: rotateZ(-25deg); }
20% { transform: rotateZ(0deg);}
40% { transform: rotateZ(0deg);}
50% { transform: rotateZ(5deg); }
55% { transform: rotateZ(-10deg); }
58% { transform: rotateZ(15deg); }
60% { transform: rotateZ(0deg);}
65% { transform: rotateZ(0deg);}
72% { transform: rotateZ(30deg); }
78% { transform: rotateZ(-35deg); }
85% { transform: rotateZ(0deg);}
95% { transform: rotateZ(0deg);}
100% { transform: rotateZ(105deg);}
}
EDIT:
After trying one last thing, of course I found the culprit. I am drawing this particular svg's path, and then when it's done drawing, changing the animation play state to running. Here is my js :
setTimeout(function(){
svg.style.animationPlayState = svg.style.WebkitAnimationPlayState = 'running';
}, 4500);
Once i removed that functionality it all worked fine. I really need this the animation to fire after the svg is drawn (for obvious reasons). Any help would be awesome.
Turns out this is an issue with how iOS and the mobile broswers handle the animation play state... Essentially they don't.
The solution was to add the class
.no-animation {
animation: none !important;
}
to the element, and remove that class with js when the time is right. Feels kind of like a hack, but its the only thing I could find to work on both mobile and desktop. If anyone has better suggestions, I'd love to hear them!
<style>
#keyframes shake {
0% {
-moz-transform:scale(0);opacity:0;
}
25% {
-moz-transform:scale(1.3);opacity:1;
}
50% {
-moz-transform:scale(0.7);opacity:1;
}
75% {
-moz-transform:scale(2);opacity:1;
}
100% {
-moz-transform:scale(1);opacity:1;-moz-transform:rotate(45deg);
}
}
</style>
<div style="-moz-animation-duration:2s;" onclick='this.style.mozAnimationName="shake";'>TEST</div>
It works fine in Google Chrome with its respective -webkit prefix, but with Firefox (-moz), it doesn't function properly.
Is there a solution for this, or is this simply a dumb mistake on my part? Furthermore, I do not want to utilize jQuery for my solution.
It doesn't work because Firefox no longer requires the vendor prefixes in more recent versions (starting from Firefox 16), so just drop those:
http://jsfiddle.net/nsca73oo/2/
<style>
#keyframes shake {
0% {
transform: scale(0);
opacity:0;
}
25% {
transform: scale(1.3);
opacity: 1;
}
50% {
transform: scale(0.7);
opacity: 1;
}
75% {
transform: scale(2);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
transform: rotate(45deg);
}
}
</style>
<div style="animation-duration: 2s;" onclick='this.style.animationName = "shake";'>TEST</div>
So I am making a website and can make the CSS animation work for when the page is first called but I want it to call everytime the AJAX function is called. Here is the javascript XML call which works
function XML(infoId)
{
var xmlHttp = xmlHttpObjCreate();
if (!xmlHttp) {
alert("The browser doesn't support this action.");
return;
}
xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
elemObj = document.getElementById('textbox');
elemObj.innerHTML = xmlHttp.responseText;
elemObj.className = "bounceInUp";
}
}
// Append GET data to identify which quote we want
var reqURL = "FILE_NAME_HERE_?infoId=" + infoId;
xmlHttp.open("GET", reqURL, true);
xmlHttp.send();
}
Here is an example of what calls the function
Here is the CSS animation code which is named is "bounceInUp"
#textbox {
width: 100%;
background-color: transparent;
height: 200px;
color: #0000FF;
font-weight: bold;
font-size: 22px;
overflow: auto;
padding: 10;
-webkit-animation: bounceInUp 1200ms ease-out;
-moz-animation: bounceInUp 1200ms ease-out;
-o-animation: bounceInUp 1200ms ease-out;
animation: bounceInUp 1200ms ease-out;
}
#-webkit-keyframes bounceInUp {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes bounceInUp {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
I apologize for all the code but I want to make sure everything is here that someone may need to help me. So as of right now the css animation only runs when the page is first loaded not when the XML function is called.
It looks like you are already attaching the animation via the #textbox CSS selector. And your AJAX call adds a class name that appears to have the exact same animation properties that are already applied to the textbox via the #textbox rule.
In order to get your animation to fire again, I suspect you need to clear the animation CSS property off of your #textbox before the AJAX call is sent, then your AJAX call will reapply the animation. You can do this a variety of ways, one off the top of my head would be to create a separate class that clears the animation and apply that classname to #textbox before you do your xmlHttp.send(), that way the textbox is back to a non-animated state before your success handler from the AJAX call reapplies the animation.
To simplify it, you may just want to remove the animation properties from the #textbox CSS rule and just apply and remove the .bounceInUp class name to the element when you want the animation to run. I think that's a cleaner approach.
You can use classList:
this.classList.remove('bounceInUp');
this.classList.add('bounceInUp');
That will re-apply the class and make the bounce happen again. It is simpler and more readable than setTimeout. You're fine with classList since you're using keyframes - each will work on IE10 and above.
I have a project with angularjs and bootstrap where I'm trying to replicate iOS's navigationController.
The problem is speed. It seems like one of the biggest issues is scrolling up/down when doing the transition between views. It just doesn't feel right.
My question is: how can I improve the speed of scrolling up/down and left/right in mobile safari iOS? I know it's doable (ionic is one good example, but we can't use them since they are mobile only).
This is my current code:
/* View animations */
.view-animate-container {
position: relative;
width: 100%;
}
.view-animate {
-webkit-backface-visibility: hidden;
}
.view-animate.ng-leave {
z-index: 1054;
}
.view-animate.ng-enter {
z-index: 1053;
}
.view-animate.ng-enter, .view-animate.ng-leave {
-webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s;
transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s;
position: absolute;
width: 100%;
display: block;
}
.rtl .view-animate.ng-enter {
-webkit-transform: translate3d(100%, 0, 0);
-webkit-transition-delay: 0.1s;
opacity: 0;
}
.rtl .view-animate.ng-enter.ng-enter-active {
-webkit-transform: translate3d(0, 0, 0);
opacity: 1;
}
.rtl .view-animate.ng-leave.ng-leave-active {
-webkit-transform: translate3d(-100%, 0, 0);
opacity: 0;
}
.ltr .view-animate.ng-enter {
-webkit-transform: translate3d(-100%, 0, 0);
-webkit-transition-delay: 0.1s;
opacity: 0;
}
.ltr .view-animate.ng-enter.ng-enter-active {
-webkit-transform: translate3d(0, 0, 0);
opacity: 1;
}
.ltr .view-animate.ng-leave.ng-leave-active {
-webkit-transform: translate3d(100%, 0, 0);
opacity: 0;
}
/* End of View animations */
<div class='view-animate-container' ng-class='direction'>
<div id='mApp' ng-view class='view-animate' autoscroll='false'></div>
</div>
// Random scrollHeight fix. Moves the scroll position up during the transition.
function scrollToTop() {
var ua = $('html')[0].className;
var diff = document.body.scrollHeight;
var delay = ((ua.indexOf('ua-mobile') > -1 && ua.indexOf('ua-webkit') > -1) ? (320 + diff/17) : 50);
window.setTimeout(function() {
window.scrollTo(0, 0);
}, delay)
}
I would try two things:
On the overflowed div (that is the div that you have set the overflow property), setting the overflow property to 'scroll', rather then using 'auto'.
Then, use $scope.$evalAsync which will be executed right after the digest has been finished (but before the actual rendering).
If it still doesn't work, you can combine the $evalAsync and setTimeout (or $timeout) - setting the timeout inside the $evalAsync.
I am trying to work around this bug: http://code.google.com/p/chromium/issues/detail?id=20574 thinking of performing the transform, and then afterwards removing it while positioning the element in its end position via JavaScript.
I tried
document.getElementById('popover').style.setProperty("-webkit-transform", "translate3d(0,0,0)")
and
document.getElementById('popover').style.setProperty("-webkit-transform", "none")
None seem to have any effect.
If I remove the transforms and position the elements manually the fixed element does behave as it should.
Here are the transforms themselves:
#popover.open {
display: block;
position: relative;
-webkit-animation: openpopup 0.2s 1;
-webkit-animation-fill-mode: forwards;
}
#popover.closed {
-webkit-animation: closepopup 0.2s 1;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes openpopup {
from {
-webkit-transform: translate3d(0, 100%, 0);
}
to {
-webkit-transform: translate3d(0, 0%, 0);
}
}
#-webkit-keyframes closepopup {
from {
-webkit-transform: translate3d(0, 0%, 0);
}
to {
-webkit-transform: translate3d(0, 100%, 0);
}
}
Javascript had a different name for the css property you are trying to change. It's called WebkitTransform.
document.getElementById('popover').style.setProperty("WebkitTransform", "none"); Should work.