I'm trying to do a WordCloud with zoom in-out of words. I'm using JavaScript to randomly set CSS to zoom the words, however the words just disappear and then appear.
This is my CSS code:
svg text.zoom {
/* Webkit for Chrome and Safari */
-webkit-transform: scale(1, 1); /*This is the scale for the normal size of the image. */
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-in-out;
/* Webkit for Mozila Firefox */
-moz-transform: scale(1, 1);
-moz-transition-duration: 0.5s;
-moz-transition: ease-in-out;
/* Webkit for IE( Version: 11, 10 ) */
-ms-transform: scale(1, 1);
-ms-transition-duration: 0.5s;
-ms-transition-timing-function: ease-in-out;
}
Can someone help?
Looks like you have missed the standart transition property. Try adding the following CSS code
svg text.zoom{
transition: all 0.5s ease-in-out;
}
I hope this will help
I want to use this functionality in my website (when press in 'SHOW IT') --> http://labs.voronianski.com/jquery.avgrund.js/
The problem is that this functionality need to put body height to 100%. In some time, in me site I need to detect the scroll user to make topbar appear and disappear em some positions.
So to can join this two functionality's, I only change body height to 100% when I press button to show the div avground. But where I have a problem: the button is on page footer and when I change body height, they automatically send me to the top of page and after show de div avground.
Is any way to this don't happen or is possible to scroll to footer before the div avground appear?
If someone have another solution, I appreciate.
Thanks
Have you tried using bootstrap's modals? They are very simple to make and look nicer in my opinion.
http://getbootstrap.com/javascript/
You don't actually have to do that, for that animation you can use simple CSS3:
CSS:
#layer-body {
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
#layer-body.hide {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
}
#menu {
background: rgba(208, 31, 60, .95);
position: fixed; top: 0; left: 0; z-index: 4;
width: 100%; height: 100%;
}
#menu.show {
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
#menu.hide {
visibility: hidden;
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
transition: transform 0.5s, visibility 0s 0.5s;
}
HTML:
<body>
<div id="layer-body"></div>
<div id="menu"></div>
</body>
This means, all of your website will be inside #layer-body, and the menu inside #menu.
So when you open the menu you'll have to add the class HIDE to the #layer-body and SHOW to the #menu.
I'm not sure if this is a duplicate or not, so forgive me.
Question
Is it possible to change the animation-duration without resetting the animation? If not, is it possible to wait until the final keyframe is completed before removing the animation and re-adding it to start the animation at the slower speed (or even wait until any keyframe is complete)?
Background
I'm making an app that allows people to create groups. I work at a church, and different groups are for different demographics (e.g. children, men, women, all adults, etc). Groups may be for a single demographic or many. Groups may also specify whether childcare is handled by the group or if the parent must take care of it.
We've found that when creating a group intended for adults but that provides childcare at the house the group meets at, people select "Children" which indicates to us that the group is for children, which it is not.
I only have 570px by 456px to work with (against my objections, the group submission page is loaded in a popup iframe), so I had to get creative with layout. Previously (ie, before bootstrap), I had an ugly layout with smaller inputs, and an ugly message explaining that, in the case described above, they should not select children, and it worked to a degree.
Now, I have a blue info button that uses a bootstrap popover to display the message.
This works to a lesser degree, as I suspect people are not clicking the button, as "Who's invited?" seems fairly self explanatory.
My solution is to make the info-sign bounce if they select more than one demographic, and bounce twice as fast if one of the selected checkboxes is "Children".
Code
I've created the classes and added the (simplified) JavaScript to do this.
var iGlyph = $("#glyphInfo");
var btnBounce = $("#btnToggleBounce");
var btnFast = $("#btnToggleFast");
var spanDur = $("#spanDuration");
var spanClass = $("#spanClass");
function updateText() {
spanDur.text(iGlyph.css("animation-duration"));
spanClass.text(iGlyph.prop("class"));
}
$(function() {
btnBounce.click(function() {
iGlyph.toggleClass("bounce");
updateText();
});
btnFast.click(function() {
iGlyph.toggleClass("bounce-fast");
updateText();
});
updateText();
});
/* LESS-generated CSS */
.bounce {
-webkit-animation: bounceKeyframe infinite;
-o-animation: bounceKeyframe infinite;
animation: bounceKeyframe infinite;
-webkit-animation-duration: 0.7s;
animation-duration: 0.7s;
}
.bounce.bounce-fast {
-webkit-animation-duration: 0.35s;
animation-duration: 0.35s;
}
#keyframes bounceKeyframe {
0% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
35% {
-webkit-transform: translate(0, -0.9em);
-ms-transform: translate(0, -0.9em);
-o-transform: translate(0, -0.9em);
transform: translate(0, -0.9em);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
70% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
}
#-webkit-keyframes bounceKeyframe {
0% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
35% {
-webkit-transform: translate(0, -0.9em);
-ms-transform: translate(0, -0.9em);
-o-transform: translate(0, -0.9em);
transform: translate(0, -0.9em);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
70% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
}
#-moz-keyframes bounceKeyframe {
0% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
35% {
-webkit-transform: translate(0, -0.9em);
-ms-transform: translate(0, -0.9em);
-o-transform: translate(0, -0.9em);
transform: translate(0, -0.9em);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
70% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="text-align: center; margin-top: 5%">
<div class="btn btn-info">
<span id="glyphInfo" class="glyphicon glyphicon-info-sign" style="line-height: 22px"></span>
</div>
</div>
<div style="text-align: center">
animation-duration: <span id="spanDuration"></span>
</div>
<div style="text-align: center">
classes: <span id="spanClass"></span>
</div>
<div style="text-align: center; margin-top: 15px">
<div class="btn btn-default" id="btnToggleBounce">Toggle Bounce</div>
<div class="btn btn-default" id="btnToggleFast">Toggle Fast</div>
</div>
This works in Firefox, though when you toggle .bounce-fast, the animation restarts (skips). Not surprisingly, Internet Explorer bounces the icon completely off screen (looks like it doesn't like using both em and px units), but animation-duration-wise, it acts the same as Chrome, which uses whatever animation-duration was set to when the animation rule was set, and never overrides it until the animation rule is unset.
Problem
So, ideally, I would be able to set the animation-duration somehow without having to reset the animation completely. I want a smooth transition from one speed to the other, without the icon jumping.
Is this possible?
Unfortunately there is no way to do this with pure CSS animations. The nature of CSS animations is that the calculations for the transition only have to happen once (when the animation is called) in order to speed them up.
If you want to change speed of animations you'll need to use Javascript (which is nearly as fast, sometimes faster than, CSS animations)
I particularly like Greensock and Velocity
How do I trigger and control text animation with scrolling?
<p class="class">TEXT</p>
transform:translateX(-500px);opacity:0;
transform:translateX(0px);opacity:1;
You can use Skrollr.
Import the library, then something like
<p class="class" data-X_start=" transform:translateX(-500px);opacity:0;" data-X_end=" transform:translateX(0px);opacity:1;">
TEXT</p>
would start the animation when your scroll bar is at X_start and finish it when you reach X_end.
You must set your initial style values.
Modify style values by:
a. Adding Class
b. Adding inline style property
c. use css3 animation style property
or
Use external js library.
do not forget cross-browser compability by using prefixes.
Example (using jQuery):
//css
.class {
-moz-transform: translateX(-500px);
-ms-transform: translateX(-500px);
-o-transform: translateX(-500px);
-webkit-transform: translateX(-500px);
transform:translateX(-500px);
opacity:0;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.class.animated {
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1;
}
//html
<p class="class">TEXT</p>
//js - animate on scrol event
$( "#target" ).scroll(function() {
$(".class").toggleClass("animate");
});
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.