This question already has answers here:
Maintaining the final state at end of a CSS animation
(5 answers)
Closed 20 days ago.
Can you please tell me how can I raise the block by clicking on the button, and that it would remain at position -25px?
$('button').click(function() {
$('.block').addClass('animation');
})
.block {
width: 100px;
height: 100px;
background: green;
}
.animation {
animation: up 750ms;
}
#keyframes up {
0% {
margin-top: 0px;
}
100% {
margin-top: -25px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block"></div>
<button>UP</button>
You need to add the animation-fill-mode: forwards property to the .animation class rule. That will set the element to the properties of the animation finished state.
Documentation for animation-fill-mode
$('button').click(function() {
$('.block').addClass('animation');
})
.block {
width: 100px;
height: 100px;
background: green;
}
.animation {
animation: up 750ms;
animation-fill-mode: forwards;
}
#keyframes up {
0% {
margin-top: 0px;
}
100% {
margin-top: -25px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block"></div>
<button>UP</button>
Use CSS transforms instead of margins:
$('button').click(function() {
$('.block').addClass('animation');
})
.block {
width: 100px;
height: 100px;
background: green;
transform: translateY(0);
transition: transform 750ms;
}
.animation {
transform: translateY(-25px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block"></div>
<button>UP</button>
Related
Here is an example: https://codepen.io/jon424/pen/XWzGNLe
I have a button here that lets you toggle the visibility of an image. When the button is clicked, the image disappears from the bottom to the top. When you click the button again, the image reappears from the top to the bottom.
I would like the transition to move in the same direction each time. So, when the user sees the image and clicks on the button, the image disappears from the bottom to the top. When the user clicks the button again, the image reappears from the bottom to the top.
Is there a way to use transitions without this kind of “alternating” activity?
HTML
<button>Toggle</button>
<div class="parent">
<img class="child1" src="https://picsum.photos/200/300">
<div class="child1 covering"></div>
</div>
CSS
.parent {
position: relative;
overflow: hidden;
width: 300px;
height: 300px;
margin: 10px;
}
.child {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.covering {
z-index: 1;
background: #fff;
transition: transform 1s ease-in-out;
transform: translateY(100%);
}
.covered {
transform: translateY(0%);
}
JS
const firstTarget = document.querySelector(".firstTarget");
const covering = document.querySelector(".covering");
document.querySelector('button').addEventListener('click', () => { document.querySelector('.covering').classList.toggle('covered');});
You can use keyframes for this, or listen to transitionend.
const btn = document.querySelector('button'),
cover = document.querySelector('.cover');
btn.addEventListener('click', ()=> {
if(cover.classList.contains('covered')){
cover.classList.add('remove_covered');
} else {
cover.classList.add('covered');
}
cover.ontransitionend = () => {
if(cover.classList.contains('remove_covered'))
cover.classList.remove('covered','remove_covered');
};
});
.child {
width: 300px;
height: 300px;
}
.parent {
position: relative;
width: 300px;
height: 300px;
}
.cover {
position: absolute;
bottom: 0;
left: 0;
height: 0;
width: 100%;
background: #fff;
transition: height 1s ease-in-out;
}
.covered {
height: 100%;
}
.remove_covered {
top: 0;
bottom: auto;
height: 0;
}
<button>Toggle</button>
<div class="parent">
<img class="child" src="https://picsum.photos/200/300">
<div class="cover"></div>
</div>
Is that what you want?
const targetClassList = document.querySelector(".image-item").classList;
document.querySelector("button").addEventListener("click", () => {
if (targetClassList.contains("open")) {
targetClassList.remove("open");
targetClassList.add("close");
} else {
targetClassList.add("open");
targetClassList.remove("close");
}
});
.parent {
position: relative;
overflow: hidden;
width: 300px;
height: 300px;
margin: 10px;
}
.child {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.image-item {
z-index: 1;
background: #fff;
}
.close {
animation: closeAni 1s forwards;
}
.open {
animation: openAni 1s forwards;
}
#keyframes openAni {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
#keyframes closeAni {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
<button>Toggle</button>
<div class="parent">
<img class="child" src="https://picsum.photos/200/300">
<div class="child image-item"></div>
</div>
This question already has answers here:
How to have css3 animation to loop forever
(3 answers)
Closed 4 years ago.
My animation is currently moving in a square motion. However, I want it to move from the left side of the screen to the right side and back again on an infinite loop. Can anyone help with this?
.animation {
width: 10px;
height: 10px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
}
#keyframes example {
0% {
background-color: red;
left: 0px;
top: 0px;
}
25% {
background-color: red;
left: 200px;
top: 0px;
}
50% {
background-color: red;
left: 200px;
top: 200px;
}
75% {
background-color: red;
left: 0px;
top: 200px;
}
100% {
background-color: red;
left: 0px;
top: 0px;
}
}
<div class="animation"></div>
You can set an animation's iteration count to infinite, and create a seamless loop by having the starting and ending keyframes (0% and 100%) share the same position, like so:
.animation {
width: 10px;
height: 10px;
background-color: red;
position: relative;
animation: example 2s infinite;
}
#keyframes example {
0%,
100% {
left: 0;
}
50% {
left: 200px;
}
}
<div class="animation"></div>
Try adding animation-iteration-count and setting it to infinite:
animation-iteration-count: infinite
I have two divs which has one circle along with one smily where innercircle1 div is rotating with given animation.
What i want is when i hover on innercircle1 div it should stop but with their current transform origin position,
Currently when i hover over innercircle1 div it goes to their starting point i.e. their given transform origin and stop.
body {
background: #000;
color: #fff;
}
#keyframes circle {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframes inner-circle {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.outercircle {
border: 1px solid red;
border-radius: 50%;
width: 310px;
margin: 64px auto;
height: 310px;
position: Relative;
}
.innercircle {
width: 100px;
height: 100px;
margin: 20px auto 0;
color: orange;
font-size: 100px;
line-height: 1;
animation: circle 5s linear infinite;
transform-origin: 50% 200px;
position: ABSOLUTE;
top: -70px;
left: 109px;
}
.innercircle1 {
animation: inner-circle 5s linear infinite;
}
<div class="outercircle"><div class="innercircle"><div class="innercircle1">☻</div></div></div>
You can pause animation using JQUERY as well as CSS.
A very simple solution to use animation-play-state property.
Try these lines:
.innercircle1 {
animation: inner-circle 5s linear infinite;
animation-play-state: play;
}
.innercircle1:hover{
animation-play-state: paused;
}
I am trying to accomplish the effect from this answer but without the text: Expand bottom border on hover
And know this can be accomplished by growing the entire div from the center as with here: http://jsfiddle.net/wNXLY/ but have no idea how to create this effect with line (i.e keeping the height static)
I have created my line here:
.line {
background: white;
width: 300px;
top: 10%;
height: 3.2px;
margin:auto;
position: relative;
}
And need to have the line grow from the center on page load. How can I do this?
You can use css animation with animation-fill-mode set to forwards, setting #keyframes width from 0% to n%, left from 50% to 5%
body {
width:100%;
}
div {
display:block;
position:absolute;
top:45%;
left:50%;
border-bottom:4px solid red;
width:0%;
text-align:center;
animation: line 2s linear forwards;
}
#keyframes line {
from {
left:50%;
width:0%;
}
to {
left:5%;
width:90%;
}
}
<div></div>
#keyframes line_animation {
from {
width: 0%;
}
to {
width:100%;
}
}
.line {
border-bottom: solid 3px #019fb6;
border-top-width: 0px;
animation-name: line_animation;
animation-duration: 4s;
animation-timing-function: linear;
}
Like this
<hr class="line" />
i have utilised display grid and SCSS to configure an authentic border animation
.top-border {
grid-area: tb;
// background: green;
border-bottom: $border-config;
width: 0%;
animation: horizontal-border-animation $animation-duration / 2 forwards;
animation-delay: $animation-delay;
}
.bottom-border {
grid-area: bb;
//to prevent being visible since it is going to be delayed
width: 0%;
// background: yellow;
border-top: $border-config;
animation: horizontal-border-animation $animation-duration / 2 forwards;
// because both right and bottom will start animating after top and left + the intitial delay
animation-delay: $animation-duration / 2 + $animation-delay;
}
#keyframes expand-border-width {
from {
width:0%;
}
to {
width:100%;
}
}
check my sample to gain an explicit clarification
https://codepen.io/ino0r/pen/eYEgvrZ
You don't need keyframes for this if you're just transitioning the effect.
<div class="line"></div>
.line {
width: 0%;
height: 1px;
position: absolute;
left: 50%;
background: #f00;
transition: all 1s;
}
.line:hover {
width: 100%;
left: 0%;
}
I have been trying to fade out a CSS3 preloader with jQuery. I have been trying to stop the animation (which is a box rotating), and then fade in a letter inside the box then, have them both fade out, the letter fading out a little later than the box. I have had the problem where the letter fades in way later than I want it to and when it comes on if fades out really fast. Here is the code:
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('.loader-inner').css({'-webkit-animation': 'none'});
$('.loader').delay(100).css({'-webkit-animation': 'none'}); // will first fade out the loading animation
$('.letter').delay(100).fadeIn('slow');
$('.preloader').delay(2050).fadeOut('slow');// will fade out the white DIV that covers the website.
$('.letter').delay(2060).fadeOut(900);
$('body').delay(2060).css({'overflow':'visible'});
});
//]]>
body, html {
height: 100%;
text-align: center;
}
body {
background-color: #2f2f2f;
}
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
background-color: #2f2f2f;
}
.loader {
display: block;
width: 60px;
height: 60px;
position: fixed;
border: 5px solid #d5b317;
top: 50%;
left:50%;
-webkit-animation: loader 2s infinite ease;
z-index: -10;
overflow: hidden;
margin-left: -29px
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #d5b317;
-webkit-animation: loader-inner 2s infinite ease-in;
z-index: -10;
}
#font-face {
font-family: 'Adobe Gurmukhi';
src: url(/fonts/AdobeGurmukhi-Regular.ttf);
}
.letter {
display:hidden;
color: #f7d11e;
font-family: 'Adobe Gurmukhi';
font-size: 70px;
position:absolute;
top: 50%;
left: 50%;
margin-top: -17px;
margin-left: -19px;
z-index: -9;
}
#-webkit-keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">
</script>
<!--preloader-->
<div class="preloader">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<span><p class="letter">ਅ</p></span>
The z-index of .preloader (99999) is higher than that of .letter (-9). That delay you are experiencing is the delay until .preloader fades out and thus reveals .letter. As a quick fix I made the z-index of .letter higher than that of .preloader and that delay is gone.
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('.loader-inner').css({'-webkit-animation': 'none'});
$('.loader').delay(100).css({'-webkit-animation': 'none'}); // will first fade out the loading animation
$('.letter').delay(100).fadeIn('slow');
$('.preloader').delay(2050).fadeOut('slow');// will fade out the white DIV that covers the website.
$('.letter').delay(2060).fadeOut(900);
$('body').delay(2060).css({'overflow':'visible'});
});
//]]>
body, html {
height: 100%;
text-align: center;
}
body {
background-color: #2f2f2f;
}
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
background-color: #2f2f2f;
}
.loader {
display: block;
width: 60px;
height: 60px;
position: fixed;
border: 5px solid #d5b317;
top: 50%;
left:50%;
-webkit-animation: loader 2s infinite ease;
z-index: -10;
overflow: hidden;
margin-left: -29px
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #d5b317;
-webkit-animation: loader-inner 2s infinite ease-in;
z-index: -10;
}
#font-face {
font-family: 'Adobe Gurmukhi';
src: url(/fonts/AdobeGurmukhi-Regular.ttf);
}
.letter {
display:hidden;
color: #f7d11e;
font-family: 'Adobe Gurmukhi';
font-size: 70px;
position:absolute;
top: 50%;
left: 50%;
margin-top: -17px;
margin-left: -19px;
z-index: 999999;
}
#-webkit-keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">
</script>
<!--preloader-->
<div class="preloader">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<span><p class="letter">ਅ</p></span>
what you are doing is first you use delay that means you want to call fadeOut after some delay and you given the delay time 2 sec and its working correctly as expected.
Its started fading out after 2 sec.
I think its working as expected if you want to fade it out little soon then you have to reduce the delay time of remove delay.
Hope this may help you.
Thanks!!
you can try the callback function
$('.letter').delay(100).fadeIn('slow', function(){
// function called after fade in finished
setTimeout(function(){
$('.preloader').fadeOut('slow');
$('.letter').fadeOut(900);
$('body').css({'overflow':'visible'});
}, 2600);
});
Replace your code with this, both will fadeOut at same time.
// will fade out the white DIV that covers the website.
$('.letter').delay(2060).fadeOut('fast');