How to apply animation to vertically centered element with CSS

How to apply animation to vertically centered element with CSS - javascript

I have a div within another div to which I would like to apply a CSS animation. The problem seems to be that I am applying multiple transforms to the div. In order to center the inner div, I am using the following:
#inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I then add the following class to the div on click:
.spin {
animation: whirl 1s ease-in-out;
}
#keyframes whirl {
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(0deg);
}
}
It seems that the fact that I have already used a transform to center the div makes it so that the animation doesn't work correctly. If I remove the transform: translate(-50%, -50%); line from the CSS, the animation works correctly, but the div is not centered.
Here is a jsfiddle I made to demonstrate the issue.
Thanks for your help!

The issue is because the translate is lost on animation.change it by adding both translate and rotate on animation
#keyframes whirl {
50% {
transform: translate(-50%, -50%) rotate(180deg);
}
100% {
transform: translate(-50%, -50%) rotate(0deg);
}
}
function spin() {
$("#inner").addClass("spin");
}
#main {
background-color: black;
position: relative;
width: 400px;
height: 400px;
}
#inner {
background-color: red;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border-radius: 10px;
transform: translate(-50%, -50%);
}
.spin {
animation: whirl 1s ease-in-out;
}
#keyframes whirl {
50% {
transform: translate(-50%, -50%) rotate(180deg);
}
100% {
transform: translate(-50%, -50%) rotate(0deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="inner" onclick="spin()"></div>
</div>

Related

Transform Rotate not working on my CSS when I added keyframes [duplicate]

I have a situation similar to this fiddle, where I have a CSS3 animation that scales an element absolute-positioned in the centre of another element. However, when the animation takes place it is off-centre, as seen by the red squares relative to blue in the example. How do I centre it? I have tried a couple of configurations around the transform-origin property, but this isn't producing the correct results.
#keyframes ripple_large {
0% {transform:scale(1); }
75% {transform:scale(3); opacity:0.4;}
100% {transform:scale(4); opacity:0;}
}
.container {
position: relative;
display: inline-block;
margin: 10vmax;
}
.cat {
height: 20vmax;
}
.center-point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 10px;
width: 10px;
background: blue;
}
.to-animate {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid red;
height: 5vmax;
width: 5vmax;
transform-origin:center;
}
.one {
animation: ripple_large 2s linear 0s infinite;
}
.two {
animation: ripple_large 2s linear 1s infinite;
}
<div class='container'>
<img src='http://www.catster.com/wp-content/uploads/2017/08/Pixiebob-cat.jpg' class='cat'>
<div class='center-point'>
</div>
<div class='to-animate one'></div>
<div class='to-animate two'></div>
</div>

The issue is that you are overriding the translate transformation.
When you specify a new transformation (the one inside the animation) it override the first one. In your case you are removing the translation that is fixing the center alignment.
You need to add them to the same transform property and pay attention to the order because it's important (Why does order of transforms matter? rotate/scale doesn't give the same result as scale/rotate)
#keyframes ripple_large {
0% {
transform: translate(-50%, -50%) scale(1);
}
75% {
transform: translate(-50%, -50%) scale(3);
opacity: 0.4;
}
100% {
transform: translate(-50%, -50%) scale(4);
opacity: 0;
}
}
.container {
position: relative;
display: inline-block;
margin: 10vmax;
}
.cat {
height: 20vmax;
}
.center-point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 10px;
width: 10px;
background: blue;
transform-origin: center;
}
.to-animate {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid red;
height: 5vmax;
width: 5vmax;
}
.one {
-webkit-animation: ripple_large 2s linear 0s infinite;
animation: ripple_large 2s linear 0s infinite;
}
.two {
-webkit-animation: ripple_large 2s linear 1s infinite;
animation: ripple_large 2s linear 1s infinite;
}
<div class='container'>
<img src='http://www.catster.com/wp-content/uploads/2017/08/Pixiebob-cat.jpg' class='cat'>
<div class='center-point'>
</div>
<div class='to-animate one'></div>
<div class='to-animate two'></div>
</div>
UPDATE
As commented, it's better to center your element using another method than translation to avoid changing the animation since this can be used with other elements.
Example:
#keyframes ripple_large {
0% {
transform: scale(1) ;
}
75% {
transform:scale(3) ;
opacity: 0.4;
}
100% {
transform: scale(4) ;
opacity: 0;
}
}
.container {
position: relative;
display: inline-block;
margin: 10vmax;
}
.cat {
height: 20vmax;
}
.center-point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 10px;
width: 10px;
background: blue;
transform-origin:center;
}
.to-animate {
position: absolute;
top: 0;
left: 0;
bottom:0;
right:0;
margin:auto;
border: 1px solid red;
height: 5vmax;
width: 5vmax;
}
.one {
animation: ripple_large 2s linear 0s infinite;
}
.two {
animation: ripple_large 2s linear 1s infinite;
}
<div class='container'>
<img src='http://www.catster.com/wp-content/uploads/2017/08/Pixiebob-cat.jpg' class='cat'>
<div class='center-point'>
</div>
<div class='to-animate one'></div>
<div class='to-animate two'></div>
</div>

Hide loading icon after 3 sec, when we click on a link <a

I have a loading icon in CSS, when someone clicks on a link the problem is in the mobile version I have a slide menu that open with one tag, or link, and the CSS icon is showing and never disappear.
I need to hide the CSS icon after 3 sec, this is my code.
$('a').click(function(){
$('.loadingDiv').fadeIn('slow', function(){
$('.loadingDiv').delay(3000).fadeOut();
});
$('<div class="loadingDiv mobileShow"></div>').prependTo(document.body);
});
.loadingDiv {
position: fixed;
left: 45%;
top: 30%;
width: 100%;
height: 100%;
z-index: 9999;
opacity: .5;
width: 40px;
height: 40px;
background-color: #333;
width: 40px;
height: 40px;
background-color: #333;
margin: 100px auto;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
#-webkit-keyframes sk-rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
#keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
But is not working, any help will be great, because the

Don't forget about setTimeout.
You can simply:
setTimeout(function () {
... do the fading out here ...
}, 3000);
I always prefer vanila-js solution over jQuery one. ;)
Cheers!

Diagonal background html and css

Hey guys I was wondering if you guys could help me for some code that I was interested in. In different websites like udacity, or a website that my friend is making (he won't show me the code) they have diagonal backgrounds. Or maybe you could call it diagonal shapes, or whatever it is I'm just wondering how to create it. An example would be the home page of udacity. They have the background split and I was wondering how to do it (I'm not worried about the gradient) https://www.udacity.com/

.hero--homepage::before {
content: '';
width: 100%;
height: 300px;
z-index: -1000;
background: linear-gradient(160deg, #02CCBA 0%, #AA7ECD 100%);
transform-origin: left bottom;
position: absolute;
top: 0;
left: 0;
-webkit-transform: skew(0deg, -15deg);
-moz-transform: skew(0deg, -15deg);
-ms-transform: skew(0deg, -15deg);
-o-transform: skew(0deg, -15deg);
transform: skew(0deg, -15deg);
}
<div class = "hero--homepage"></div>

This should work,
.wrap {
postion: relative;
background-color: #fff;
width: 100%;
}
.bg:before {
content: '';
position: absolute;
width: 100%;
height: 400px;
background-color: #000;
transform-origin: left bottom;
top: 0;
left: 0;
-webkit-transform: skew(0deg, -30deg);
-moz-transform: skew(0deg, -30deg);
-ms-transform: skew(0deg, -30deg);
-o-transform: skew(0deg, -30deg);
transform: skew(0deg, -30deg);
}
<div class="wrap">
<div class="bg"></div>
</div>

Trigger click on one anchor when another is clicked

When I click on the link, I would like the link to be also clicked. However, nothing happens with my code, see fiddle.
HTML:
<section class="space_between">
<h3 class="center_rounded_ol">Man-to-man suggestions</h3>
<ol class="rounded-list center_rounded_ol">
<li>
Name Surname
</li>
</ol>
</section>
<nav class="nav-fillpath">
<a class="next" onClick="load()">
<span class="icon-wrap"></span>
<h3><strong>Alexis</strong> Tsipras</h3>
</a>
</nav>
JavaScript:
function load() {
$("#foo").tigger('click');
}
function burn() {
$(this).css("color", "red");
}

I personally prefer writing it this way: JS Fiddle
$('.next').on('click', function() {
$("#foo").trigger('click');
});
$('#foo').on('click', function() {
$(this).css("color", "red");
});
$('.next').on('click', function() {
$("#foo").trigger('click');
});
$('#foo').on('click', function() {
$(this).css("color", "red");
});
nav a {
position: absolute;
top: 50%;
display: block;
outline: none;
text-align: left;
z-index: 1000;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
nav a.prev {
left: 0;
}
nav a.next {
right: 0;
}
nav a svg {
display: block;
margin: 0 auto;
padding: 0;
}
/*--------------------*/
/* Fillpath (http://www.nizuka.fr/)*/
/*--------------------*/
.color-10 {
background: #f3cf3f;
}
.nav-fillpath a {
width: 100px;
height: 100px;
}
.nav-fillpath .icon-wrap {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.nav-fillpath a::before,
.nav-fillpath a::after,
.nav-fillpath .icon-wrap::before,
.nav-fillpath .icon-wrap::after {
position: absolute;
left: 50%;
width: 3px;
height: 50%;
background: #566475;
content: '';
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.nav-fillpath .icon-wrap::before,
.nav-fillpath .icon-wrap::after {
z-index: 100;
height: 0;
background: #fff;
-webkit-transition: height 0.3s, -webkit-transform 0.3s;
transition: height 0.3s, transform 0.3s;
}
.nav-fillpath a::before,
.nav-fillpath .icon-wrap::before {
top: 50%;
-webkit-transform: translateX(-50%) rotate(-135deg);
transform: translateX(-50%) rotate(-135deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.nav-fillpath a.next::before,
.nav-fillpath a.next .icon-wrap::before {
-webkit-transform: translateX(-50%) rotate(135deg);
transform: translateX(-50%) rotate(135deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.nav-fillpath a::after,
.nav-fillpath .icon-wrap::after {
top: 50%;
-webkit-transform: translateX(-50%) rotate(-45deg);
transform: translateX(-50%) rotate(-45deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.nav-fillpath a.next::after,
.nav-fillpath a.next .icon-wrap::after {
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
.nav-fillpath h3 {
position: absolute;
top: 50%;
margin: 0;
color: #fff;
text-transform: uppercase;
font-weight: 300;
font-size: 0.85em;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
}
.nav-fillpath a.prev h3 {
left: 100%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
.nav-fillpath a.next h3 {
right: 100%;
text-align: right;
-webkit-transform: translateY(-50%) translateX(50%);
transform: translateY(-50%) translateX(50%);
}
.nav-fillpath a:hover .icon-wrap::before,
.nav-fillpath a:hover .icon-wrap::after {
height: 50%;
}
.nav-fillpath a:hover::before,
.nav-fillpath a:hover .icon-wrap::before {
-webkit-transform: translateX(-50%) rotate(-125deg);
transform: translateX(-50%) rotate(-125deg);
}
.nav-fillpath a.next:hover::before,
.nav-fillpath a.next:hover .icon-wrap::before {
-webkit-transform: translateX(-50%) rotate(125deg);
transform: translateX(-50%) rotate(125deg);
}
.nav-fillpath a:hover::after,
.nav-fillpath a:hover .icon-wrap::after {
-webkit-transform: translateX(-50%) rotate(-55deg);
transform: translateX(-50%) rotate(-55deg);
}
.nav-fillpath a.next:hover::after,
.nav-fillpath a.next:hover .icon-wrap::after {
-webkit-transform: translateX(-50%) rotate(55deg);
transform: translateX(-50%) rotate(55deg);
}
.nav-fillpath a:hover h3 {
opacity: 1;
-webkit-transform: translateY(-50%) translateX(0);
transform: translateY(-50%) translateX(0);
}
#media screen and (max-width: 520px) {
.nav-slide a.prev,
.nav-reveal a.prev,
.nav-doubleflip a.prev,
.nav-fillslide a.prev,
.nav-growpop a.prev {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.nav-slide a.next,
.nav-reveal a.next,
.nav-doubleflip a.next,
.nav-fillslide a.next,
.nav-growpop a.next {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.nav-slide a,
.nav-reveal a,
.nav-doubleflip a,
.nav-fillslide a {
-webkit-transform: scale(0.6);
transform: scale(0.6);
}
.nav-growpop a {
-webkit-transform: translateY(-50%) scale(0.6);
transform: translateY(-50%) scale(0.6);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="space_between">
<h3 class="center_rounded_ol">Man-to-man suggestions</h3>
<ol class="rounded-list center_rounded_ol">
<li>
Name Surname
</li>
</ol>
</section>
<nav class="nav-fillpath">
<a class="next">
<span class="icon-wrap"></span>
<h3><strong>Alexis</strong> Tsipras</h3>
</a>
</nav>
Update:
using this is better because this way you separate your javascript all in .js or <script> instead of having it scattered on DOM elements so keep the HTML "clean", something like the inline CSS vs external CSS. Beside doing it this way you can easily attach more than one event..
This post jQuery.click() vs onClick has more detailed answer.

There is a typo in load() function:
function load() {
$("#foo").trigger('click'); //'r' was missing
}
Please note that
$(this)
inside burn() function returns window instance, is that what you are expecting there?
In case you want to change color of a link that gets clicked here is a HTML code (notice event parameter added):
Name Surname
and js:
function burn(element) {
$(element).css("color", "red");
}
This solution with 'this' lets you reuse burn() function for more that one link, it doesn't bind you to #foo elemenent only.

How to hide div under another during CSS3 animation

The CSS code :
.mainDiv{
width: 600px;
height: 600px;
background-color: blue;
}
.innerDiv{
width: 400px;
margin: auto;
height: 400px;
background-color: green;
}
.innerDiv div{
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
}
.removing{
-webkit-animation: slideout 1s;
animation: slideout 1s;
}
#-webkit-keyframes slideout {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
100% {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
}
#keyframes slideout {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
100% {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
}
Here is a jsFiddle of the problem.
What i would like it to do is this :
When the first red block moves outside of the green block, i would like it to be behind the blue block instead of in front of it.

add the line: overflow:hidden; to your .innerDiv css rule

Use z-index.
Example:
#somethingBehind {
z-index: 1;
}
#somethingAtTheFront {
z-index: 2;
}

Develop Reference

JavaScript is the programming language of the Web.

How to apply animation to vertically centered element with CSS - javascript

Related

Transform Rotate not working on my CSS when I added keyframes [duplicate]

Hide loading icon after 3 sec, when we click on a link <a

Diagonal background html and css

Trigger click on one anchor when another is clicked

How to hide div under another during CSS3 animation

Categories

Resources