Thanks for taking out the time to look into this and any help in this regard is appreciated.
I have the following piece of code.
.middle_n.expand.remove
{
animation: contractm 0.3s forwards;
transform-origin: 0 75px;
height:200%;
animation-delay: 1.3s;
}
#keyframes contractm
{
0%{}
100%{transform:translate(147.8%,100%) rotate(-16.75deg);}
}
I wish to pass a dynamic value to rotate in contractm through javascript. How do I do that. Can multi step animation run through javascript?
Thanks again.
In my opinion, if you want to control your animation rather than just let it animate, my recommendation is that you can use js to control the style of your element. Because animation is to complete a series of animation.
And there is a really powerful css called css variable, you can take more details on https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties.
const rotate=document.getElementById("rotate")
let r=0
rotate.addEventListener("click",()=>{
r += 10
rotate.style.setProperty("--rotate", r+"deg");
})
#rotate{
--rotate:0deg;
background:pink;
width:100px;
height:100px;
transform:rotate(var(--rotate));
transition:transform 1s;
}
<p>click the square and then it will rotate.</p>
<div id="rotate"></div>
Of course, if you want a series of animations, you can check it on https://developer.mozilla.org/en-US/docs/Web/CSS/animation. It's easy to set steps in animation.
Related
Let say I have a div
<div id='animate'></div>
and has an animation of:
#keyframes move{
from{transform:translateX(500px);}
to{transform:translateX(0px);}
}
And i have a button that when clicked will programatically set the animationDirection to reverse. But what happen is that it restart the animation and execute the animation in reverse. What I really want is reverse the animation from its current state(before the animation ends) without restarting.
Is that possible?
http://jsfiddle.net/fdZKw/
keyframe animations require a from (0%) and a to (100%) parameters, so unless you set these parameters on the fly via javascript, I don't think you can make it happen. Although, the transition property does what you want - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
I have applied it to your fiddle: http://jsfiddle.net/fdZKw/1/
#animate{
width:100px;
height:100px;
background:#0099CC;
transition:transform 5s;
-webkit-transition:-webkit-transform 5s;
}
#animate.go {
transform:translateX(500px);
-webkit-transform:translateX(500px);
}
Im currently in a deep learning process for a school project. After a month I perfectly understood the concept of css3 and html, including, but very limited, some basic javascript.
I have read alot of tutorials and have found a new one which includes a demo which is truly fascinating to me. It uses a drop down menu list to trigger the page transition effects. Studying the code it starts to make sense to me. However, im starting to wonder how to to apply seperate individual buttons instead of creating list items as a trigger.
I have no clue where to start or which part of the code has to be changed. I would be happy for some feedback.
The Demo: http://tympanus.net/Development/PageTransitions/
Even i wondered the same. with their code i extracted few classes and created example in fiddle.
For animations code go through their animation.css and use required animation classes. for example i have extracted this class
.pt-page-moveFromRight {
-webkit-animation: moveFromRight .6s ease both;
animation: moveFromRight .6s ease both;
}
#-webkit-keyframes moveFromRight {
from { -webkit-transform: translateX(100%); }
}
#keyframes moveFromRight {
from { -webkit-transform: translateX(100%); transform: translateX(100%); }
}
Check out example here:
http://jsfiddle.net/zb5nacc8/1/
you can try this: https://github.com/icodebuster/transition.js plugin
they use the same code only they are separate buttons that trigger the transitions
Does anyone know why I can't see the effects of the content property in my keyframe animation?
I tried something like
#-webkit-keyframes mymove {
0.000% {-webkit-transform: matrix(1,0,0,1,294,-135);
color:blue;
content:"test";
}
/*... more keyframes that changed the -webkit-transform property...*/
}
When I was watching my animated HTML div during the animation, I could see the effects of the -webkit-transform and color properties, but not the content property. It's as if the content property wasn't even applied during the animation. jQuery didn't return a value either when I did $(<my animated html element>).css("content"); However, repeatedly testing $(<my animated html element>).css("-webkit-transform") returned different values as the div moved across the screen.
I don't necessarily want to use the content property to display anything. I want to be able to store some meta data in the CSS keyframe rule so that I can refer back to the corresponding percentage at which the animation is at. I need to be able to run an animation on an infinite loop, and periodically query the animated HTML element to figure out how far along it is in the animation. I thought that I could use the content property to just put arbitrary strings, but it's not working on Chrome or Firefox. Does anyone have any ideas how I'd store metadata within the keyframe CSS rule?
I dont fully understand what you are trying to say when you are storing the metadata in keyframe.. In anyway, jquery or the javascript cannot read the css3 'content' data. Also I am pretty sure you cannot use content property inside the keyframe. you either need to use :after or :before. eg.
#box:before {
content: "test";
}
If you want the animation run infinte, you can use
-webkit-animation: mymove 5s infinite;
Let me know if this works.
Check this url http://msdn.microsoft.com/en-us/library/ie/jj680076(v=vs.85).aspx.
This article works good on Internet Explore 9+
For another browsers other than IE 9+, you need to copy and paste the css3 animation keyframe with vendor specific keywork.
for eg. for chrome you have to write the css in the article as:
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.TransformDemoDivFadeOut:hover {
animation-duration: 2s;
animation-name: fadeOut;
#-webkit-animation-duration: 2s;
#-webkit-animation-name: fadeOut;
}
#-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
First off, my apologies for a lengthy post. I am trying to use CSS, HTML and JavaScript, so please don't recommend using std. libraries.
1)I have found people using different approaches in CSS,HTML and JavaScript to achieve the "fade in/ fade out effect" on navigation bars, some of the approaches using CSS and JavaScript are:
a) Use property "left" to get the submenu outside the screen. Default left :-500px ;onmouseover- left:-10px
b) Use property "visibility". Default visibility: "hidden" and onmouseover-
visibility: visbile
c)use property "display". Default display:none and onmouseover- display:block
My question is which one is the best approach and why?
2)I have used the method a) in this jsfiddle: http://jsfiddle.net/A7TND/.
CSS
.teal-box{
left:-10px;
}
HTML
<div class="level1" onmouseover="showSubs("+")">
Javascript
switch (vwFlg){
case "+" :
elmt.style.left = "-10px";
...
}
In the example, I am not sure whether the function gets called over and over when I am moving between the main item(favorite) and subitems(jsfiddle, google), my questions are:
a) does it get called over and over during the mouse movement between main items(favorites) and sub-items(google and jsfiddle)?
b) how does that(calling javascript function over and over) affect the responsiveness of the page?
3.The approach I did for having multiple images(see the jsfiddle link) separated by , is have multiple divs - where top has different values, is that the best approach? This would mean , I would have to write a div for each image, is there a some spiffy way of using "position" properties absolute and relative to achieve that without creating as many divs as images?
I want to have a table ,how do I get that "button popping out of the page" look ? I tried to debug a commercial web app, it seems they seem to repeat a background image, which I tried, but that did not work.
CSS
.sel-row {
border-style:solid;
border-width:1px;
background-image:url("\lb_sel.gif");
background-repeat:repeat-x-y;
background-color:#CDD2D7 ;
border-color:#8B96A2 ;
height:20px;
}
My approach for something like this, is to have the hidden element be a child of the hover element, then use absolute positioning + display for the hide/show
<li>
Button Copy
<span>HIDE SHOW ME</span>
</li>
li {
position:relative;
}
li:hover span {
display:block;
}
li span {
position:absolute;
top:25px;
left:0;
display:none;
}
Are you animating the opacity as well?
Use javascript to add a class to the element, CSS3 to animate but understand the browsers that don't use CSS3. Also, don't use display anymore.
<li>
Button Copy
<span>HIDE SHOW ME</span>
</li>
li {
position:relative;
}
li.show span {
opacity:0;
}
li span {
position:absolute;
top:25px;
left:0;
opacity:1;
-webkit-transition: all .8s ease-in;
-moz-transition: all .8s ease-in;
-o-transition: all .8s ease-in;
-ms-transition: all .8s ease-in;
transition: all .8s ease-in;
}
With a browser that doesn't support css3, I use Modernizr + jQuery for the fallback. You'd have to turn this into a toggle.
if (!Modernizr.csstransitions) { // if browser doesn't support css3.transitions
$('li span').animate({ "opacity": '1' }, 800);
} else { // if browser does support css3.transitions
$('li').addClass('show');
}
if i apply a style to an element and immdiatily afterwards add css transition styles, the transition is applied to the style preceeding. this might not always be the intention.
i found a solution by using settimeout (0), is there any cleaner/more correct approach known ?
http://jsfiddle.net/nicib83/XP9E7/
$("div").css("opacity", 1);
$("div").css("-webkit-transition", "all 0.35s");
/* Works
window.setTimeout(function () {
$("div").css("-webkit-transition", "all 0.35s");
}, 0);
*/
best regards
Edit:
i didn't mean how best to set css styling but how to sequentially set styles when the first style should be applied without the second being active at that time but only afterwards, i wan to add transition afterwards. settimeout fixes it, best solution ?
It's much better to pre-define a class that contains both of the properties you want to apply, and add that class programmatically to the element. Both of the properties will be applied together.
.myClass {
opacity: 1;
-webkit-transition: all 0.35s;
}
$("div").addClass("myClass");
You could take a page from the book of Twitter Bootstrap:
fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-moz-transition:opacity 0.15s linear;
-o-transition:opacity 0.15s linear;
transition:opacity 0.15s linear;
}
.fade.in{
opacity:1;
}
then programatically add the .in class when you want it to fade in:
$("div").addClass("in");
with your original div looking something like:
<div class="fade">Box</div>
I've been running up against this myself and also found the setTimeout solution. After some research the issue is how the browser handles scheduling. The JavaScript runs in its own thread separate from the threads dealing with the UI and the DOM (which is why issues like UI blocking happen).
In cases like this both JavaScript statements run before the document registers the first change and it ends up applying both classes at the same time. setTimeout(fn,0) effectively makes the function asynchronous and shunts the functions to run at the next available opportunity. This allows the UI thread to catch up before the next class is added.