We Keep Coding

Zoom in out of Words css

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

What is making these subnavs expand?

I'm looking at http://voky.com.ua/showcase/sky-mega-menu/examples/demo-personal.html and I can't figure out what is making the subnavs expand. For example, hover over "Portfolio" and see the subnav expand. I've inspected all the elements around the nav items and I can't find any CSS3 transition and I also can't see Javascript adding any style attributes to the elements or adding any classes.

There are two parts to this;
The expanding effect is achieved by setting the scale property to (0,0) when the menu is closed and then (1,1) when its visible, and having a transition property for the animating timing. Here are the relevant lines;
/* line 60 */
.sky-mega-menu li > div {
...
-o-transition: -o-transform 0.4s, opacity 0.4s;
-ms-transition: -ms-transform 0.4s, opacity 0.4s;
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
}
/* line 374 */
.sky-mega-menu-anim-scale li > div {
-o-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-moz-transform: scale(0, 0);
-webkit-transform: scale(0, 0);
}
/* line 380 */
.sky-mega-menu-anim-scale li:hover > div {
-o-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
}
The visibility of the submenu on hover is achieved by setting it's opacity to 0 and then 1 when you hover on the respective li
/* line 60 */
.sky-mega-menu li > div {
...
opacity: 0;
}
/* line 101 */
.sky-mega-menu li:hover > div {
opacity: 1;
}

In the CSS sheet named "sky-mega-menu.css" the div next to the li tag being hovered is set to 1 which make it visible.
.sky-mega-menu li:hover > div {
left: 0;
opacity: 1;
-webkit-transform: translate(0, 0);

CSS3 changing animation duration (speed) mid-animation

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 to add a simple card flip animation?

I am creating a solitary game. So far I got most things working, but the card flip animation is a pain in the a**.
See this fiddle (it might be a bit slow since the whole game code is in it)
When you drag and drop a card, the back of the card is replaced with a front. This is done in this part of the code:
upturn: function () {
with(this) {
if (is_downturned()) {
element.children('.downturned')
.removeClass('downturned').addClass(_SUITS[_suit()].color)
.append('<img height="80px" width="50px" border="0" src="http://mauricederegt.com/test/solitaire/cards/' + _RANKS[_rank()] + '' + _SUITS[_suit()].symbol + '.jpg">') //NEW
element.addClass(_scope());
if (element.hasClass('ui-draggable-disabled')) {
element.draggable('enable');
} else {
element.draggable({
containment: '#field',
revert: 'invalid',
revertDuration: 200,
zIndex: 99
});
}
if (!element.hasClass('ui-droppable-disabled')) {
element.droppable($.extend(DROPPABLE_OPTIONS, {
accept: _tableau_pile_scope()
}));
}
}
}
}
Basically it removes the back of the card (.removeClass('downturned')) and adds a new class (.addClass(_SUITS[_suit()].color)) where suits are the hart, clover etc and the color is black or red.
Now when this action happens, I want to add a nice flipping animation.
I have played around with some tutorials on the web, but non gave me a working solution (mostly the cards starting to act weird or the game stopped working).
The closest I could get was adding:
-webkit-perspective: 600px;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(180deg);
/* -- transition is the magic sauce for animation -- */
-webkit-transition: 0.6s;
in the CSS in the class:
.red,
.black {
cursor: pointer;
<<<code added here>>>
}
This, however, resulted in some weird actions (though the card is flipping):
Card flips, but after the image/front is already shown
All cards are mirrored
The drag/handle area of the cards is way off
So how can I add a nice card flipping animation? Hope someone can help me out.
EDIT:
By changing this.element.addClass('container').append('<div class="downturned">'); to this.element.addClass('container').append('<div class="downturned">').append('<div class="hiddencardfront">'); in the JS part, I can create an extra empty div, (which I think I need for the card flip animation), but I still can't make it work

I guess there are a couple of ways of doing it. But I guess I'm to suggest the old-ish way of doing it using only one element. Essentially since it's a 2D object, the front and back will never show at the same time and there is going to be a point where the card will "disappear". So we can split the animation into two. "Hiding" the card (Here we can animate the width to zero). Changing the image to the other card, then "showing" the card again (animate from zero to the original width again). So if we use jQuery, with an html of
<img class="card" src="http://mauricederegt.com/test/solitaire/cards/back.jpg" />
the jQuery will look something like:
var CARDWIDTH = 50;
function turnCompatible(elem, src) {
$(elem).animate({
width: 0, //animate to zero
marginLeft: CARDWIDTH / 2,
marginRight: CARDWIDTH / 2
}, function () {
this.src = src //change the image
$(this).animate({
width: CARDWIDTH, //show the image again
marginLeft: 0,
marginRight: 0,
})
})
}
$(".card").click(function(){
turnCompatible(this, src)
})
And this will more or less work. Though the animation could be better improved for example with CSS transforms and animations but this solution would be compatible with browsers that don't support CSS transforms (mostly IE. IE<10). And with that you can do something like
function turnCSS(elem, src) {
$(elem)
.addClass("flipping")
.bind("transitionend webkittransitionend", function () { //should add more prefixes
this.src = src;
$(this)
.unbind("transitionend webkittransitionend")
.removeClass("flipping")
})
}
with the following CSS
.card {
width:50px;
height:80px;
-webkit-transition:-webkit-transform 0.5s;
transition:transform 0.5s;
background:#FF0;
}
.flipping {
transform: translate(0, 20px) rotateY(90deg);
-webkit-transform: translate(0, 20px) rotateY(90deg);
}
Demo
So perhaps the look is not what you're looking for but it is possible to do the flip animation with just one element.

I think the big problem I am having is that when this was build, no flip animation was considered. So there is just 1 Div, where more are needed to make it work. Also the drag and drop code used is old and interrups with the animation code.
I guess the only solution is to start over from scratch, with animations in mind this time.
All thanks for helping and given solution, but starting over is the way to go I think
Greetings

Try this
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst1 {
from {
-webkit-transform : rotateY(180deg);
-moz-transform : rotateY(180deg);
-ms-transform : rotateY(180deg);
transform: rotateY(180deg);}
to {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
}
#-webkit-keyframes myfirst2 {
from {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
to {
-webkit-transform : rotateY(0deg);
-moz-transform : rotateY(0deg);
-ms-transform : rotateY(0deg);
transform: rotateY(0deg);}
}
/* Standard syntax */
#keyframes myfirst1 {
from {
-webkit-transform : rotateY(180deg);
-moz-transform : rotateY(180deg);
-ms-transform : rotateY(180deg);
transform: rotateY(180deg);}
to {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
}
#keyframes myfirst2 {
from {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
to {
-webkit-transform : rotateY(0deg);
-moz-transform : rotateY(0deg);
-ms-transform : rotateY(0deg);
transform: rotateY(0deg);}
}
#-webkit-keyframes mylast1 {
from {
-webkit-transform : rotateY(0deg);
-moz-transform : rotateY(0deg);
-ms-transform : rotateY(0deg);
transform: rotateY(0deg);}
to {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
}
#-webkit-keyframes mylast2 {
from {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
to {
-webkit-transform : rotateY(180deg);
-moz-transform : rotateY(180deg);
-ms-transform : rotateY(180deg);
transform: rotateY(180deg);}
}
#keyframes mylast1 {
from {
-webkit-transform : rotateY(0deg);
-moz-transform : rotateY(0deg);
-ms-transform : rotateY(0deg);
transform: rotateY(0deg);}
to {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
}
#keyframes mylast2 {
from {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
to {
-webkit-transform : rotateY(180deg);
-moz-transform : rotateY(180deg);
-ms-transform : rotateY(180deg);
transform: rotateY(180deg);}
}
</style>
<script>
$(document).ready(function()
{
$("#btn2").hide();
$("#btn1").click(function(){
$("#btn1").hide();
$("#box1").css({ 'z-index':'2',
'-webkit-animation': 'myfirst1 5s',
'animation': 'myfirst1 5s'
});
$("#box2").css({ 'z-index':'0' ,
'-webkit-animation': 'mylast1 5s',
'animation': 'mylast1 5s'
});
setTimeout(function(){
$("#box1").css({ 'z-index':'0',
'-webkit-animation': 'myfirst2 5s',
'animation': 'myfirst2 5s'
});
$("#box2").css({ 'z-index':'2' ,
'-webkit-animation': 'mylast2 5s',
'animation': 'mylast2 5s'
});
}, 5000);
setTimeout(function(){$("#btn2").show();}, 10000);
});
$("#btn2").click(function(){
$("#btn2").hide();
$("#box2").css({ 'z-index':'2',
'-webkit-animation': 'myfirst1 5s',
'animation': 'myfirst1 5s'
});
$("#box1").css({ 'z-index':'0',
'-webkit-animation': 'mylast1 5s',
'animation': 'mylast1 5s'
});
setTimeout(function(){
$("#box2").css({ 'z-index':'0',
'-webkit-animation': 'myfirst2 5s',
'animation': 'myfirst2 5s'
});
$("#box1").css({ 'z-index':'2',
'-webkit-animation': 'mylast2 5s',
'animation': 'mylast2 5s'
});
}, 5000);
setTimeout(function(){$("#btn1").show()}, 10000);
});
});
</script>
</head>
<body>
<button id="btn1">flip</button>
<button id="btn2">Reset</button>
<div id="box1" style="position:fixed;background:#98bf21;height:100px;width:100px;margin:6px;">
</div><div id="box2" style="position:fixed;background:#bf2198;height:100px;width:100px;margin:6px;">
</div>
</body>
</html>
In this I have just animated two div kept back to back (you can replace it with necessary images,set positions and put things into function to reduce code. I have done this specially for you. so I didn't optimize it hence I ask you to customize to soot your requirement.

Regarding your three issues with CSS 3d transforms.
Card flips, but after the image/front is already shown
All cards are mirrored
The drag/handle area of the cards is way off
For points 1 & 2 add:
-webkit-backface-visibility:hidden; /* Chrome, Safari, Opera */
backface-visibility:hidden;
And to center your element use:
transform-origin:50% 50%;
-ms-transform-origin:50% 50%; /* IE 9 */
-webkit-transform-origin:50% 50%; /* Chrome, Safari, Opera */

transform: rotateX in jquery .animate function

I am trying to perform a flip effect using CSS.
How can I get -
transform: perspective(1200px) rotateX(0deg)
from
transform: perspective(1200px) rotateX(90deg)
using jQuery's .animate() function?
I've tried to do with jQuery 2D Transformation Plugin but no success.

Use native CSS. Something like this:
.panel {
transform: perspective(1200px) rotateX(0deg);
transition: transform 0.5s linear;
-webkit-transition: transform 0.5s linear;
}
.panel.flip {
transform: perspective(1200px) rotateX(90deg);
}
Then just toggle the class.