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!
Related
I managed to achieve this animation through CSS animations and React. but go stuck in flickering problem. I don't know why this is happening maybe 'cause I used setInterval or there is some problem with my css animations keyframes. help me to solve this problem. the flicker only occurs after some time. and after refreshing the page the animation works perfectly fine without flicker problem.
this is how the animation looks after refreshing the page and this is what I want too. (ignore the screen recorder watermark).
animation I want
but after sometime the animation starts flickering like this.
Flickering problem
here are the code snippets I wrote
jsx snippet
<div className="relative w-[280px] md:w-[350px] lg:w-[500px]">
<span>{"[ "}</span>
<p className="text_animate ml-2">
{dev ? "for" : "by"} Developers
</p>
<span className="absolute right-0 ">{" ]"}</span>
</div>
css snippet
.text_animate {
color: orange;
margin: 0 auto;
display: inline-block;
position: relative;
letter-spacing: .15em;
text-align: start;
animation: text-up 6s linear infinite;
cursor: none;
}
#keyframes text-up {
0% {
top:45px;
opacity: 0;
}
20% {
top:0;
opacity: 1;
}
35% {
top: 0;
opacity: 1;
}
50% {
top: -45px;
opacity: 0;
}
52% {
top: 45px;
opacity: 0;
}
70% {
top: 0;
opacity: 1;
}
85% {
top: 0;
opacity: 1;
}
100% {
top: -45px;
opacity: 0;
}
}
useState changing text
const [dev, setDev] = useState(true);
setInterval(() => {
setDev(!dev);
}, 3000);
If there is any better way to achieve this I would really love to learn so let me know that too.
Maybe you should put setInterval to useEffect, and remember to clear timer. Like this:
useEffect(() => {
const timer = setInterval(() => {
setDev(!dev);
}, 3000);
return () => {
clearInterval(timer);
}
}, []);
And there is a solution only using css to implement this, I will write a demo later.
EDIT:
Explain the above code:
useEffect with [] as second param will make sure run setInterval once when mount the component.
The clearInterval in return function will make sure engine GC the variables in setInterval callback functions when unmount the component, or the setInterval will still work even though you needn't it.
CSS only solution:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
margin: 0;
padding: 0;
}
.scroll-container {
overflow: hidden;
height: calc(var(--line-h) * 1px);
line-height: calc(var(--line-h) * 1px);
font-size: 18px;
}
.scroll-container ul {
animation-name: move;
animation-duration: calc(var(--speed) * var(--lines));
animation-timing-function: steps(var(--lines));
animation-iteration-count: infinite;
}
.scroll-container ul li {
animation-name: li-move;
animation-duration: var(--speed);
animation-iteration-count: infinite;
}
#keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, calc(var(--lines) * var(--line-h) * -1px));
}
}
#keyframes li-move {
0% {
transform: translate(0, 0);
}
50%,
100% {
transform: translate(0, calc(var(--line-h) * -1px));
}
}
<div
class="scroll-container"
style="--lines: 2; --line-h: 26; --speed: 3s"
>
<ul>
<li>For Developers</li>
<li>By Developers</li>
<!-- repeat first in tail for infinity -->
<li>For Developers</li>
</ul>
</div>
I leaned this from Chokcoco on CodePen but forget which post.
Hello and thank you in advance for reading my question.
GOAL: Set image so that once it's scrolled into view it transitions smoothly into a set position - but still reacts to :hover. Using #keyframes and a little JavaScript, I set the image to opacity: 0 and it's final opacity to opacity: .85. Then I added a hover effect in CSS to make it's opacity: 1
The issue is once it's finished with it's transition - it disappears - reverting to it's original opacity which is zero. I managed to make it freeze at .85 with animation-fill-mode: forwards, rather than animation-fill-mode: none, but then it won't respond to :hover
And here's a test snippet of the problem in action:
let observer_img = new IntersectionObserver(updates => {
updates.forEach(update => {
if (update.isIntersecting) {
update.target.classList.add('shift_frame_center_img');
} else {
update.target.classList.remove('shift_frame_center_img');
}
});
}, { threshold: 0 });
[...document.querySelectorAll('.features-img-wrapper img')].forEach(element => observer_img.observe(element));
body {
width: 100%;
height: 100vh;
background-color: lightgrey;
}
/* CHILD */
.features-img-wrapper img {
width: 10rem;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 8rem;
opacity: 0;
transition: all .5s;
}
/* APPEND-CHILD */
.shift_frame_center_img {
animation: center_img 1s 0.5s none;
}
/* CHILD ON HOVER */
.features-img-wrapper img:hover {
opacity: 1;
transform: scale(1.035);
}
/* KEYFRAMES */
#keyframes center_img {
0% {
transform: translateY(20rem);
}
100% {
transform: translateY(0);
opacity: .85;
}
}
<body>
<div class="features-img-wrapper">
<img src="https://synapse.it/wp-content/uploads/2020/12/test.png">
</div>
</body>
If I could get a hand with this that would be wonderful, I'm a bit of a beginner and have already spent a few hours on this, all feedback welcome. Thank you very much.
Solution 1
To understand why the hover effect was not working with the animation-fill-mode: forwards, read this answer.
You can fix that by adding !important property to the hover styles:
.features-img-wrapper img:hover {
opacity: 1 !important;
transform: scale(1.035) !important;
}
The problem, in this case, is that the transition will not work for hover.
Solution 2
You could remove the animation entirely and add the final state styles to the shift_frame_center_img class.
But you would still need to use the !important property because of the CSS Specificity.
let observer_img = new IntersectionObserver(updates => {
updates.forEach(update => {
if (update.isIntersecting) {
update.target.classList.add('shift_frame_center_img');
} else {
update.target.classList.remove('shift_frame_center_img');
}
});
}, { threshold: 0 });
[...document.querySelectorAll('.features-img-wrapper img')].forEach(element => observer_img.observe(element));
body {
width: 100%;
height: 100vh;
background-color: lightgrey;
}
/* CHILD */
.features-img-wrapper img {
width: 10rem;
transform: translateY(20rem);
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 8rem;
opacity: 0;
transition: all .5s;
}
/* APPEND-CHILD */
.shift_frame_center_img {
transform: none !important;
opacity: .85 !important;
}
/* CHILD ON HOVER */
.features-img-wrapper img:hover {
opacity: 1 !important;
transform: scale(1.035) !important;
}
<body>
<div class="features-img-wrapper">
<img src="https://synapse.it/wp-content/uploads/2020/12/test.png">
</div>
</body>
This snippet removes the need for fill-mode forwards by setting the img to have opacity 1 as its initial state so it will revert to that at the end of the animation.
The animation itself is altered to take 1.5s rather than 1s with the first third simply setting the img opacity to 0 so it can't be seen. This gives the delay effect.
let observer_img = new IntersectionObserver(updates => {
updates.forEach(update => {
if (update.isIntersecting) {
update.target.classList.add('shift_frame_center_img');
} else {
update.target.classList.remove('shift_frame_center_img');
}
});
}, { threshold: 0 });
[...document.querySelectorAll('.features-img-wrapper img')].forEach(element => observer_img.observe(element));
body {
width: 100%;
height: 100vh;
background-color: lightgrey;
}
/* CHILD */
.features-img-wrapper img {
width: 10rem;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 8rem;
opacity: 0;
transition: all .5s;
opacity: 1;
}
/* APPEND-CHILD */
.features-img-wrapper img {
animation: center_img 1.5s 0s none;
}
/* CHILD ON HOVER */
.shift_frame_center_img:hover {
opacity: 1;
transform: translateY(0) scale(1.035);
}
/* KEYFRAMES */
#keyframes center_img {
0% {
transform: translateY(20rem) scale(1);
opacity: 0;
}
33.33% {
transform: translateY(20rem) scale(1);
opacity: 0;
}
100% {
transform: translateY(0) scale(1);
opacity: .85;
}
}
<body>
<div class="features-img-wrapper">
<img src="https://synapse.it/wp-content/uploads/2020/12/test.png">
</div>
</body>
Note: as each transform setting will reset anything that isn't included both tranlateY and scale are included in each setting.
Outside the SO snippet system it was possible to leave the animation settings untouched by chaining another animation to the front which ran for 0.5s and just set the img to opacity: 0. This did not work in the snippet system (it got into a loop of flashing on and off) hence the introduction of one but extended animation.
Given :
function App() {
return (
<div className="container">
<span>
</span>
</div>
);
}
ReactDOM.render(<App />, document.querySelector("#app"));
.container {
background-color: black;
width: 100vw;
height:100px;
display: flex;
position: relative;
}
.container::before {
background: url('https://s9.gifyu.com/images/chain.gif');
background-size:cover;
content: '';
width: 100px;
height:100px;
right:35px;
bottom:-10px;
position:absolute;
z-index: 999 !important;
}
.container::after {
background: url('https://s9.gifyu.com/images/chain.gif');
background-size:cover;
content: '';
width: 100px;
height:100px;
right:80px;
bottom:-15px;
position:absolute;
rotate: -10deg;
z-index: 999 !important;
}
.container > span:before {
content: '';
background-color: rgb(231, 231, 231);
width: 75px;
height:40px;
right:80px;
bottom:-55px;
rotate: -7deg;
border: 3px solid rgb(126, 126, 126);
border-radius: 10px 10px 10px 10px;
position:absolute;
z-index: 999 !important;
/* transform: rotate(1deg) translate(279px, 28px);
animation: T-animation 3s linear infinite alternate-reverse; */
animation: animationFrames linear 6.25s;
animation-iteration-count: infinite;
transform-origin: 100% 0%;
animation-fill-mode:forwards; /*when the spec is finished*/
-webkit-animation: animationFrames linear 6.25s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 100% 0%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
}
#keyframes animationFrames{
0% {
transform: translate(35px,-2px) rotate(-3deg) ;
}
20% {
transform: translate(-14px,-8px) rotate(-3deg) ;
}
29% {
transform: translate(-14px,-8px) rotate(-3deg) ;
}
51% {
transform: translate(35px,-2px) rotate(-3deg) ;
}
72% {
transform: translate(65px,-1px) rotate(7deg) ;
}
79% {
transform: translate(65px,-1px) rotate(7deg) ;
}
100% {
transform: translate(35px,-2px) rotate(-3deg) ;
}
}
#-webkit-keyframes animationFrames {
0% {
-webkit-transform: translate(35px,-2px) rotate(-3deg) ;
}
20% {
-webkit-transform: translate(-14px,-8px) rotate(-3deg) ;
}
29% {
-webkit-transform: translate(-14px,-8px) rotate(-3deg) ;
}
51% {
-webkit-transform: translate(35px,-2px) rotate(-3deg) ;
}
72% {
-webkit-transform: translate(65px,-1px) rotate(7deg) ;
}
79% {
-webkit-transform: translate(65px,-1px) rotate(7deg) ;
}
100% {
-webkit-transform: translate(35px,-2px) rotate(-3deg) ;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>
with JSFiddle link here,
I want to find a way to run the background gifs and the animations at the same time upon refresh or something similar. Currently, if you click run code snippet they are probably synchronized, but if the page is refreshed the gifs keep playing in the background whilst the animation is reloaded.
For instance if the run code snippet is clicked multiple times, the gif just keeps playing continuously while the animation restarts.
It is tedious for me to design this animation if every time I restart my program the gif and the animation are unsynchronized.
Things I have tried
I have tried changing <div className="container" /> to <div />, refresh, then change back, but that doesn't seem to fix it. I have also tried to change my App.js to
const [loaded,setState] = React.useState("container");
const reloadGif = () => {
React.setState({loaded: ''})
setTimeout(() => {
React.setState({loaded: "container"})
}, 0)
}
return (
<div className={loaded}>
<button onClick={reloadGif}>Reset</button>
<span>
</span>
</div>
);
}
ReactDOM.render(, document.querySelector("#app"));
but clicking on the replay button doesn't reset the gif and animation at all.
Does anyone know how I can solve this problem ?
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
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