Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
im making a slide text from right to left , but when goes on left side stop moving and start again ...i want it to never stop moving from right to left .. here is my code ..
function change_left() {
$('#slide12').removeClass('slide-right').addClass('slide-left');
}
function change_right() {
$('#slide12').removeClass('slide-left').addClass('slide-right');
}
function to_left() {
setInterval(change_left, 5000);
};
function to_right() {
setInterval(change_right, 5000);
};
to_left();
to_right()
You can use css. no need jquery.
body { margin: 20px; }
.marquee {
height: 25px;
width: 420px;
overflow: hidden;
position: relative;
}
.marquee div {
display: block;
width: 200%;
height: 30px;
position: absolute;
overflow: hidden;
animation: marquee 5s linear infinite;
}
.marquee span {
float: left;
width: 50%;
}
#keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
<div class="marquee">
<div>
<span>You spin me right round, baby. Like a record, baby.</span>
<span>You spin me right round, baby. Like a record, baby.</span>
</div>
</div>
You can do this using css.
HTML
<div class="display">
<div class="moving-text">
Moving...
</div>
</div>
CSS
.display{
width:100%;
height:100px;
background:#000000;
position:relative;
overflow:hidden;
}
.display .moving-text{
display:inline-block;
font-size:40px;
padding:25px;
color:green;
position:absolute;
-webkit-animation: leftright 5s infinite; /* Safari 4.0 - 8.0 */
animation: leftright 5s infinite;
}
#keyframes leftright {
0% {left: 0;}
100% {left: 100%;}
}
#keyframes rightleft {
0% {left: 100%;}
100% {left: 0;}
}
#keyframes both {
0% {left: 0;}
49% {left: 100%;}
100% {left: 0;}
}
You can change animation: leftright 5s infinite; with 'rightleft' or 'both'
This is JsFiddle here
Related
This question already has an answer here:
How do you detect when CSS animations start and end with JavaScript?
(1 answer)
Closed 4 years ago.
How can i start one keyframes animation after other one finished?
#myDiv {
position: relative;
width: 100px;
height: 100px;
border: 1px solid;
animation-name: animation1;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes animation1 {
0% {left: 100px}
100% {left: 200px}
}
#keyframes animation2 {
0% {top: 100px}
100% {top: 200px}
}
<div id="myDiv"></div>
I want to animation2 start after animation1 finished. I dont want to divide one animation like 0%,50%,100% or use other animation's animation duration. I want to get animation finished information and use it. I don't want to use delay. Is it possible?
You could use animation-delay. If animation1 takes 3 seconds to complete, you would declare animation2 as follows
#keyframes animation2{
animation-delay : 3s;
0% {
top: 100px;
}
100% {
top: 200px;
}
}
I have 2 elements that overlap each other, on hover I want to animate the bottom element out to the right and then move back left but on top of the other element, on mouseleave I then want it to animate back to its default state. I've got something working only the opacity issue is making it quite buggy and not as smooth as I'd have liked...
https://codepen.io/liamgallagher/pen/vWrYOe?editors=1100
CSS
body {
background:#cacaca;
}
.sector-card {
position:relative;
width:50%;
.sector-panel {
width:50%;
display:block;
height:300px;
&__information {
background:#fff;
z-index:1;
position:relative;
}
&__study {
background-size:cover;
z-index:0;
position:absolute;
top:15%;
right:25%;
}
}
&:hover {
.sector-panel__study {
animation:moveFront 2s forwards;
}
}
}
#keyframes moveFront {
0% { right:25%; }
50% {z-index:3; right:0;}
100% { opacity: 1; right:25%;}
}
HTML
<div class="sector-card">
<div class="sector-panel sector-panel__information">
<h2>Big Data</h2>
<p>Lorem ipsum oosh</p>
</div>
<div class="sector-panel sector-panel__study" style="background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDvM3R_A9_W32EdH7pqK-CgCg9fSLcLoXi5EbV_D0CxtrJpXYn');">
<h2>case study</h2>
</div>
</div>
I forked your pen. I just added some more brekpoints to the animation and changed the css slightly on the hover event. I think this is what you want (link to forked pen and css below)
https://codepen.io/ecglover8/pen/qVKBxX
body {
background:#cacaca;
}
.sector-card {
position:relative;
width:50%;
.sector-panel {
width:50%;
display:block;
height:300px;
&__information {
background:#fff;
z-index:1;
position:relative;
}
&__study {
background-size:cover;
z-index:0;
position:absolute;
top:15%;
right:25%;
}
}
&:hover {
.sector-panel__study {
animation:moveFront 2s forwards;
z-index:3;
}
}
}
#keyframes moveFront {
0% { z-index:-1; right:25%; }
49% {z-index:-1;right:0;}
50% {z-index:3;right:0;}
100% {right:25%;}
}
Unfortunately, you can't transition z-index. One thing you can do is transition opacity to make it appear smoother.
Something like:
#keyframes moveFront {
0% { right:25%; opacity: 0; }
100% { right:0%;z-index:3; opacity: 1; }
}
Hope this helps!
Well, the CSS only solution i got was creating another animation that will play when the mouse leave. It does, obviously, an animation when you load the page but thats because it is a CSS only solution:
https://codepen.io/anon/pen/YEvPNB?editors=1100
I just copied the same animation and put the values on backwards.
#keyframes moveBack {
100% {
z-index: -1;
right: 25%;
top: 5%;
}
50% {
z-index: -1;
right: 0;
}
49% {
z-index: 3;
right: 0;
top: 10%;
}
0% {
z-index: 3;
right: 25%;
top: 5%;
}
}
And then i just put the naimation on your .sector-panel__study.
&__study {
background-size: cover;
z-index: 0;
position: absolute;
top: 5%;
right: 25%;
animation: moveBack 1s forwards; // HERE
}
Hope this helps.
Well I managed to do the back to position part but it becomes a bit buggy because there is not opposite to :hover, so this will execute when the div is created.
Changed this to the CSS:
body {
background:#cacaca;
}
.sector-panel__study{
opacity: 0.5;
animation:moveBack 2s backwards;
animation-fill-mode: forwards;
}
.sector-card {
position:relative;
width:50%;
.sector-panel {
width:50%;
display:block;
height:300px;
&__information {
background:#fff;
z-index:1;
position:relative;
}
&__study {
background-size:cover;
z-index:0;
position:absolute;
top:15%;
right:25%;
}
}
&:hover {
.sector-panel__study {
animation:moveFront 2s forwards;
animation-fill-mode: forwards;
}
.sector-panel__information {
opacity: 0.5;
z-index: 0;
}
}
}
#keyframes moveFront {
0% { right:25%; }
50% {z-index:3; right:0;}
100% { opacity: 1; right:25%;}
}
#keyframes moveBack {
0% { z-index: 3; Right:25%; opacity:1;}
50% {z-index:0; Right:0;}
100% { opacity: 0.5; Right:25%;}
}
Can put snipped, you will have to copy this css code and test!
I have a bounce animation occur on hover on my page (on an image of an arrow). However, if the cursor is near the top edge, it will generally jitter, due to the change of the position of the content area from what I can gather. The image will move, bringing your mouse out of the hover area, resetting the image position abruptly, and repeating until you move the mouse.
Does anyone have any idea how to fix this? Can be CSS/Javascript/some other library, doesn't matter to me.
.arrow-main {
position: absolute;
left: 0;
right: 0;
bottom: 1%;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
width: 90px;
}
.bounce:hover {
-webkit-animation:bounce .9s infinite;
-moz-animation:bounce .9s infinite;
-o-animation:bounce .9s infinite;
animation:bounce .9s infinite;
}
#-webkit-keyframes bounce {
0% { bottom:10px; }
50% { bottom:0px; }
100% { bottom:10px; }
}
#-moz-keyframes bounce {
0% { bottom:10px; }
50% { bottom:0px; }
100% { bottom:10px; }
}
#-o-keyframes bounce {
0% { bottom:10px; }
50% { bottom:0px; }
100% { bottom:10px; }
}
#keyframes bounce {
0% { bottom:10px; }
50% { bottom:0px; }
100% { bottom:10px; }
}
I actually made a codepen to try and illustrate the issue, but it doesn't jitter at all... I'm using Chrome.
EDIT: Just tried the codepen again, and it jitters as it should.
EDIT 2: I modified the codepen to try out the comments so far, and if you hold your cursor near the bottom of the arrow img, you should get an idea of what I am trying to combat.
CodePen
I know there are other and more preferred methods, but I'm trying to give a div img a bounce effect using jQuery.
I'm trying to loop
$('#downarrow').animate({bottom:'4px'});
$('#downarrow').animate({bottom:'0px'});
Any help would be awesome. Thanks!
One very simple solution:
function bounceUp(){
$('#downarrow').animate({bottom:'4px'}, 1000, bounceDown);
}
function bounceDown(){
$('#downarrow').animate({bottom:'0px'}, 1000, bounceUp);
}
bounceUp();
An example: https://jsfiddle.net/DerekL/nd8kf61s/
You can use jQuery to addClass or toggleClass. But this approach using the css animation.
$(document).ready(function() {
$('.arrow').toggleClass('upp');
});
.arrow {
position: relative;
bottom: 0px;
}
.upp {
-webkit-animation: mymove 1.5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 1.5s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
0% {
bottom: 10px;
}
50% {
bottom: 0px;
}
100% {
bottom: 10px
}
}
#keyframes mymove {
0% {
bottom: 10px;
}
50% {
bottom: 0px;
}
100% {
bottom: 10px
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="arrow">
hey
</div>
So, I have created a CSS3 animation that is supposed to fade out an element by setting its opacity from 1 to 0 and at the last frames change the position to absolute and display to none. But on Safari it will only maintain the opacity, position and display are not set to the final values.
#-webkit-keyframes impressum-fade-out {
0% {
opacity: 1;
display: block;
position: relative;
}
99% {
opacity: 0;
position: relative;
}
100% {
opacity: 0;
display: none;
position: absolute;
}
}
It seems to work on Chrome but not on Safari (I tried version 8). Apparently, position and display do not work properly with animation-fill-mode: forwards...
JSFiddle: http://jsfiddle.net/uhtL12gv/
EDIT For Bounty: I am aware of workarounds with Javascript and transitionend events. But I am wondering why Browsers lack support for this? Does the specification state that fillmode forwards doesnt apply to some attributes like position or is this a bug in the browsers? Because I couldnt find anything in the bug trackers.. If anybody has some insight, I would really appreciate it
As Suggested in the comments, you can adjust the height.
EDIT: Animation Reference Links Added.
Display property is not animatable.
Position property is not
animatable.
List of all CSS properties and if and how they are
animatable.
$('.block').click(function() { $(this).toggleClass('active') });
#-webkit-keyframes impressum-fade-out {
0% {
opacity: 1;
}
99% {
opacity: 0;
}
100% {
opacity: 0;
height:0;
}
}
.block {
width: 100px;
height: 100px;
background: blue;
}
.block2 {
width: 100px;
height: 100px;
background: red;
}
.block.active {
-webkit-animation-name: impressum-fade-out;
animation-name: impressum-fade-out;
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="block"></div>
<div class="block2"></div>
I would suggest you the cross-browser solution based on CSS3 Transitions and transitionend event:
JSFiddle
$('.block').one('click', function() {
var $this = $(this);
$this.one('webkitTransitionEnd transitionend', function() {
$this.addClass('block_hidden');
$this.removeClass('block_transition');
});
$this.addClass('block_transition');
});
.block {
width: 100px;
height: 100px;
background: blue;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.block_2 {
background: red;
}
.block_transition {
opacity: 0;
}
.block_hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block"></div>
<div class="block block_2"></div>