Develop Reference

Is it possible to combine translateX/translateY and scale in single CSS transition?

I have been playing around with looping of CSS transitions (following this article).
The transition itself could be divided into 4 (looped) phases:
shrinked2=>expanded=>expanded2=>shrinked
These states are represented by 4 classes:
shrinked2 - stateOne
expanded - stateTwo
expanded2 - stateThree
shrinked2 - stateFour
I am, initially, setting the width and height of my element, being transitioned, in percents via id. Then, to trigger transition, I am changing transform: scale via state classes, listed above.
Up to his point it basically works fine for me, here is demonstration on JSFiddle.
Now, as the next step I would like to center the transitioned element, vertically and horizontally, on the page (and keep it there). I am doing so by adding the following, to the element id:
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
as well as appending each transform:, in the state classes, with translateX(-50%) translateY(-50%). Now this way the scale is not applied to the element (i.e. size is not changed on transition) - only background property is affected, transition only happens once (i.e. it is not looped anymore), as if transitionend was never fired.
Here is the result on JSFiddle. Changing of expected property name (in loopTransition function) to background, has not effect (JSFiddle).
I am totally aware that there are lots of other ways to center the element. What I would like to understand is:
Is it possible to combine translateX/translateY and scale in the same CSS transition (if yes, what am I doing wrong?)
If element centering with top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); is not compatible with transitions in general or scale in particular, what is the recommended method to use?
var the_circle = document.getElementById('circle');
the_circle.addEventListener("transitionend", loopTransition);
function startTransition() {
var the_circle = document.getElementById('circle');
if (the_circle.className === 'stateOne paused') {
the_circle.style.transitionDuration = 1;
the_circle.className = 'stateTwo animated';
} else {
stopTransition();
}
}
function stopTransition() {
var the_circle = document.getElementById('circle');
the_circle.style.transitionDuration = "0.5s"
the_circle.className = "stateOne paused"
}
function loopTransition(e) {
var the_circle = document.getElementById('circle');
if (e.propertyName === "transform") {
if (the_circle.className.indexOf('paused') !== -1) {
stopTransition()
} else {
if (the_circle.className === "stateTwo animated") {
the_circle.style.transitionDuration = "1s";
the_circle.className = "stateThree animated";
} else if (the_circle.className === "stateThree animated") {
the_circle.style.transitionDuration = "1s";
the_circle.className = "stateFour animated";
} else if (the_circle.className === "stateFour animated") {
the_circle.style.transitionDuration = "1s";
the_circle.className = "stateOne animated";
} else if (the_circle.className === "stateOne animated") {
the_circle.style.transitionDuration = "1s";
the_circle.className = "stateTwo animated";
}
}
}
}
#circle {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
width: 10%;
padding-top: 10%;
border-radius: 50%;
transition: all 1s;
}
.stateOne {
background: #800080;
transform: scale(1.0001, 1.0001) translateX(-50%) translateY(-50%);
}
.stateTwo {
background: #ffe6ff;
transform: scale(2, 2) translateX(-50%) translateY(-50%);
}
.stateThree {
background: #ffe6ff;
transform: scale(2.0001, 2.0001) translateX(-50%) translateY(-50%);
}
.stateFour {
background: #800080;
transform: scale(1, 1) translateX(-50%) translateY(-50%);
}
<div id='circle' class="stateOne paused" onclick=startTransition()></div>

In CSS, #id selectors take precedence over .class selectors. Therefore, the transform declarations in your .state classes never get applied. The solution is to either:
increase the specificity of your rule, i.e. #circle.stateTwo,
add the !important flag to your declaration:
transform: scale(2, 2) translate(-50%, -50%) !important;
However this should be avoided and the first method used whenever possible.
An easier method to center elements, that doesn't mix with your animation, is to use flexbox:
.flex-container {
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
#circle {
width: 10%;
padding-top: 10%;
border-radius: 50%;
transition: all 1s;
}
.stateOne {
background: #800080;
transform: scale(1.0001, 1.0001);
}
.stateTwo {
background: #ffe6ff;
transform: scale(2, 2);
}
.stateThree {
background: #ffe6ff;
transform: scale(2.0001, 2.0001);
}
.stateFour {
background: #800080;
transform: scale(1, 1);
}

Page elements shaking due to CSS effect

I added a ripple effect to happen when the user clicks anywhere on a div. It works well except that when the page is full screen, the element shake and go blurry for until the ripple disappears.
Here's the JS for the effect:
$("div").click(function(e) {
// Remove any old ripples
$(".ripple").remove();
// Setup
var posX = $(this).offset().left,
posY = $(this).offset().top,
buttonWidth = $(this).width(),
buttonHeight = $(this).height();
// Add the element
$(this).prepend("<span class='ripple'></span>");
// Make it round
if(buttonWidth >= buttonHeight) {
buttonHeight = buttonWidth;
} else {
buttonWidth = buttonHeight;
}
// Get the center of the element
var x = e.pageX - posX - buttonWidth / 2;
var y = e.pageY - posY - buttonHeight / 2;
// Add the ripples CSS and start the animation
$(".ripple").css({
width: buttonWidth,
height: buttonHeight,
top: y + 'px',
left: x + 'px'
}).addClass("rippleEffect");
});
And the CSS:
.ripple {
width: 0;
height: 0;
border-radius: 50%;
background: rgba(249, 107, 107, 0.8);
transform: scale(0);
position: absolute;
opacity: 1;
z-index: 100;
}
.rippleEffect {
animation: rippleDrop .4s linear;
}
#keyframes rippleDrop {
100% {
transform: scale(0.1);
opacity: 0;
}
}
Here's the fiddle but you can't see the issue as it's a minimized preview, so here's another link where you can see it.
Thank you for any help!

Change your code
FIRST:
<div style="visibility: visible; position: fixed;" id="choose" class="centered">
<div style="position: fixed; transform: translate(-50%, -50%); width: 100%; left: 50%; top: 50%;" id="choose-cont">
<h3>You are X, the computer is O.</h3>
<button id="okay">OK</button>
<button id="surprise">No</button>
</div>
</div>
2.
<div style="position: fixed; transform: translate(-50%, -50%); width: 100%; left: 50%; top: 50%;" id="choose-cont">
<h3>You are X, the computer is O.</h3>
<button id="okay">OK</button>
<button id="surprise">No</button>
</div>
You can also add that in your CSS i just paste to you that you can see cahanges!
NOTE - You need chack you YQ code, i can overwrite circle
picture:http://prntscr.com/clwp72

The problem is with this class:
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Cancel it and you will not have flickering.
I'm guessing that the problem is with the transform attribute. You insert and remove items into the DOM and it has to recalculate the position.
When I clear all styles from the class- flickering is gone:
Fiddle

Fix nav bar on top on scroll down

I tried to achieve something similar to here
but for me its not fixing at top on scrolling down.Someone please provide any example or resources to achieve this feature.
.features-switcher.fixed:after,
{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
position: fixed;
z-index: 101;
width: 100%;
height: 65px;
top: 0;
left: 0;
opacity: 1
}
For my nav-bar div class features-switcher:
$(window).scroll(function () {
console.log("scrolled down");
console.log($(window).scrollTop());
if ($(window).scrollTop() > 150) {
$('features-switcher').css('top', 0);
}
}
);

You are missing a .
$('features-switcher').css('top', 0);
Should be...
$('.features-switcher').css('top', 0);

Can't get slider to use 4 items?

I have a slider that I've been trying to get working. It's demo was 3 slides, but I am trying to add 4. When I add it in, the 4 item is either
In the back permanently
Under the right-sides image
I'm not quite sure how I can fix this, if there is a way.
To help describe what I'm looking for, imagine the below is my diagram:
[back img]
[left img] [right img]
[front img]
I am trying to make it so it revolves. Currently, you can see the front/left/right images, which is what I need, but you can also see the back image.
I essentially need the back image to be hidden, so whichever image is in that spot, hide it.
Here is the set up in HTML
<div class='p_slider'>
<div class='p_slider__item'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch1.png'>
</div>
<div class='p_slider__item'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch2.png'>
</div>
<div class='p_slider__item'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch3.png'>
</div>
<div class='p_slider__item'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch3.png'>
</div>
</div>
The positioning in CSS
.p_slider__item:nth-of-type(1) {
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
left: -200px;
-webkit-filter: blur(2px);
opacity: 0.8;
z-index: 1;
}
.p_slider__item:nth-of-type(2) {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
left: 0px;
z-index: 2;
}
.p_slider__item:nth-of-type(3) {
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
left: 200px;
z-index: 1;
-webkit-filter: blur(2px);
opacity: 0.8;
}
.p_slider__item:nth-of-type(4) {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
left: 0px;
z-index: 2;
}
I have quite a bit more code invested in this, but to keep it short, I also have this JS Fiddle Link. I know this is pretty custom work so I appreciate all the help I get! Thanks!
What I've Tried
updated fiddle with 4 items all moving here: DEMO
So I now have 4 items in rotation, but the slider wants to do this.
Slide front image to right
Slide left image to center
Slide (new center) img to Left and swap with that left
Slide (new center) to right, Slide Left to center

You can simplify the code for rotating by defining classes like left,right,front and back for the positions respectively and add and remove them to elements based on rotateLeft() or rotateRight() functions.
CSS:
.back
{
-webkit-transform: scale(0.4);
-ms-transform: scale(0.4);
transform: scale(0.4);
left:0px;
z-index: 1;
-webkit-filter: blur(2px);
}
.front
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
left: 0px;
z-index: 3;
}
.left
{
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
left: -200px;
opacity: 0.8;
z-index: 2;
-webkit-filter: blur(2px);
}
.right
{
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
left: 200px;
z-index: 2;
-webkit-filter: blur(2px);
opacity: 0.8;
}
JS:
// 3D Slider for Reece
on = 0; // Init
time = 500; // Set the delay before the next click is accepted to 1 second
// Right
$('.right').click(function () {
rotateRight(); // Call
on = 1; // Set delay on
});
// Left
$('.left').click(function () {
rotateLeft(); // Call
on = 1; // Set delay on
});
play = setInterval(function () {
rotateLeft()
}, 3000)
// Rotate left
function rotateLeft() {
if (on == 0) {
var frontElem = $('.p_slider__item.front');
var leftElem = $('.p_slider__item.left');
var backElem = $('.p_slider__item.back');
var rightElem = $('.p_slider__item.right');
frontElem.removeClass('front').addClass('left');
leftElem.removeClass('left').addClass('back');
backElem.removeClass('back').addClass('right');
rightElem.removeClass('right').addClass('front');
setTimeout(function () {
on = 0; // Accept clicks again
}, time)
}
}
// Rotate right
function rotateRight() {
if (on == 0) {
var frontElem = $('.p_slider__item.front');
var leftElem = $('.p_slider__item.left');
var backElem = $('.p_slider__item.back');
var rightElem = $('.p_slider__item.right');
frontElem.removeClass('front').addClass('right');
leftElem.removeClass('left').addClass('front');
backElem.removeClass('back').addClass('left');
rightElem.removeClass('right').addClass('back');
setTimeout(function () {
on = 0; // Accept clicks again
}, time)
}
}
$('.p_slider__item img').hover(function () {
clearInterval(play)
})
$('.p_slider__item img').mouseenter(function () {
$(this).animate({ 'top': '-14px' }, 300);
})
$('.p_slider__item img').mouseout(function () {
$(this).stop(true, false).animate({ 'top': '0px' }, 300)
play = setInterval(function () {
rotateLeft()
}, 3000)
})
JSFiddle: http://jsfiddle.net/pL03g26f/2/

Javascript / jQuery "Dangle" animation

I would like to create an animation in jQuery or preferable pure javascript that makes a div "dangle". I have attached an animated gif that shows the animation. I don't know how recreate this, if it is something I can use an existing jquery easing / animation for or javascript + css animation or how. I also thought about canvas, but that would limit my ability to manipulate content etc.
RESULT:
Thanks to #peirix for helping me out with the CSS animation. Here is the result I was hoping to achieve. http://jsfiddle.net/zeg61pb7/7/
CSS
#box {
width:30px;
height:30px;
position:absolute;
top:100px;
left:100px;
text-indent: 90px;
background-color:#aaaaaa;
transform-origin: top center;
-webkit-transform-origin: top center;
-webkit-animation: dangle 2s infinite;
-webkit-border-top-left-radius: 50%;
-webkit-border-top-right-radius: 50%;
-moz-border-radius-topleft: 50%;
-moz-border-radius-topright: 50%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
#box:after {
position: absolute;
height: 5px;
width: 5px;
background: #aaaaaa;
top: -4px;
left: 12px;
content: '';
border-radius: 50%;
}
.dims {
position: absolute;
height: 10px;
width: 10px;
background: #aaaaaa;
top: 125px;
left: 110px;
border-radius: 50%;
-webkit-animation: movee 2s infinite;
}
#-webkit-keyframes dangle {
0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(30deg); }
10% { -webkit-transform: rotate(-28deg); }
15% { -webkit-transform: rotate(26deg); }
20% { -webkit-transform: rotate(-24deg); }
25% { -webkit-transform: rotate(22deg); }
30% { -webkit-transform: rotate(-20deg); }
35% { -webkit-transform: rotate(18deg); }
40% { -webkit-transform: rotate(-16deg); }
45% { -webkit-transform: rotate(12deg); }
50% { -webkit-transform: rotate(-10deg); }
55% { -webkit-transform: rotate(8deg); }
60% { -webkit-transform: rotate(-6deg); }
65% { -webkit-transform: rotate(0deg); }
}
#-webkit-keyframes movee {
9% { left: 110px; }
10% { left: 120px; }
15% { left: 100px; }
20% { left: 114px; }
25% { left: 106px; }
30% { left: 113px; }
35% { left: 107px; }
40% { left: 111px; }
45% { left: 109px; }
50% { left: 110px; }
}

Well. You don't really need javascript for that. All you need is some CSS love. I made a quick fiddle to show the basics. Just play around with the numbers a bit to get what you want.
http://jsfiddle.net/zeg61pb7/3/
One note, though. Keyframes is still in need of -prefix for webkit browsers (chrome, safari, safari on ios, android etc), so you need to write it once with, and once without the prefix to hit all browsers. (Even IE10 and IE11 supports this)

You can have a try with css3.
Here is an interesting demo in Github.
Hope it helps you.

Indeed CSS3 can work some magic here, but you would still need Javascript to start and stop the animations, on hover or click events, for example.
I've made a small JSFiddle. Try and hover the red box. I've used webkit-prefixes, but you should be able to switch that easily with moz or ms.
The key differences to other suggestions here are
use animation-iteration-count: 1 to make it dangle once and then stop.
use $.on('<prefix>animationStop') to remove the animation class. this hack is needed to restart the animation later on.

I created a Fiddle with an example of how it can be done.
It depends on the transit-Plugin for jQuery.
var count = 0;
var deg = 45;
var minus = 5;
var interval = setInterval(function(){
$ $('#box').transition({
rotate: deg + 'deg',
transformOrigin: 'center top'
}).transition({
rotate: '-'+deg+'deg',
transformOrigin: 'center top'
});
if(count === 5){
clearInterval(interval);
$('#box').transition({ rotate: '0deg' })
}
if(deg > 10){
deg = deg-(minus+5);
}
count++;
}, 300);
A big plus is, that you can chain different transitions and transforms to your element.
But it`s an additional Plugin which must be loaded.