Thank you for reading my question
.ab {
position:absolute;left:50%;top:50%
}
.logo_img {
width:100px;
}
.logo_img:hover {
-webkit-animation: hvr 0.5s ease-out 1 0s;
-ms-animation: hvr 0.5s ease-out 1 0s;
animation: hvr 0.5s ease-out 1 0s;
}
#keyframes hvr {
0% { -webkit-transform: translateX(0px);transform: translateX(0px); }
50% { -webkit-transform: translateX(900px);transform: translateX(900px);}
51% { -webkit-transform: translateX(-900px);transform: translateX(-900px);}
100% {-webkit-transform: translateX(0px);transform: translateX(0px);}
}
<div class="ab"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="logo_img" /></div>
Problem is when mouse goes on it, and image moves, then mouse is not on image and sometimes hover does not work!
Is there any way to do animation like this hover but if mouse is not on image... it keeps going?
Is it possible to user jQuery hover and add class on hover? And delete that class after animation ends?
You can create a container div for the image, wich always stays in the same place, and put the image inside this div. Then instead of checking, if the mouse is over the image, you can check if it is over the div.
#container {
border: 1px solid black;
}
.logo_img {
width:100px;
margin-left: calc(50% - 50px);
}
#container:hover .logo_img {
-webkit-animation: hvr 0.5s ease-out 1 0s;
-ms-animation: hvr 0.5s ease-out 1 0s;
animation: hvr 0.5s ease-out 1 0s;
}
#keyframes hvr {
0% { -webkit-transform: translateX(0px);transform: translateX(0px); }
50% { -webkit-transform: translateX(900px);transform: translateX(900px);}
51% { -webkit-transform: translateX(-900px);transform: translateX(-900px);}
100% {-webkit-transform: translateX(0px);transform: translateX(0px);}
}
<div id="container">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="logo_img">
</div>
var duration = 500;
$('img').mouseenter(function() {
$(this).addClass('hvr').delay(duration).queue(function() {
$(this).removeClass('hvr');
$(this).dequeue();
});
});
CODEPEN
If you mean to make animation work without hover then add this animation-iteration-count to infinite.
.logo_img {
-webkit-animation: hvr 5s ease-out;
-ms-animation: hvr 5s ease-out;
animation: hvr 5s ease-out infinite;
}
Updated another answer using jQuery,
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
$(document).ready(function(){
$("img").on("mouseenter",function(){
$(this).addClass("logo_img");
});
$("img").on("mouseleave",function(){
$(this).removeClass("logo_img");
});
});
Related
I want to make a headline on my website which would animate like one on this website: https://www.thisisbeyond.com/what-we-believe/
So I want the words to fade-up each with a little delay.
How could I do that? If it is possible with css only, that would be great. But javascript is also acceptable :)
I have tried splitting my words each into one column and then animating the columns (opacity: 0 to 1 transition), but it results in strange spacing between words AND I want them to fade-up, not only change the opacity. So I think the right way to do it is by just putting each word in a different span element and then animating the spans.
<h1 class="animated2">
<span>To</span> <span>show</span> <span>the</span> <span>power</span> <span>of</span>
<span class="highlight">humanity </span>
<span class="highlight">in</span>
<span class="highlight">business.</span>
</h1>
LINK to the website I am trying to achieve this: michalkuczek.pl
.highlight{
background: #fff;
}
#keyframes fadeInUpSmall{
0%{
opacity:0;
transform:translateY(10px)}
100%{
opacity:1;
transform:translateY(0)}
}
.animated2 span:nth-child(1) {
animation-delay: .1s;
}
.animated2 span {
animation-name: fadeInUpSmall;
}
.animated2 {
animation-duration: 1s;
animation-fill-mode: both;
animation-fill-mode: both;
}
You can achieve the opacity animation by creating keyframes that define the start and end states.
CSS:
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}
.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}
HTML:
<h1 class="animated2">
<span>To</span> <span>show</span> <span>the</span> <span>power</span> <span>of</span>
<span class="highlight fade-in one">humanity </span>
<span class="highlight fade-in two">in</span>
<span class="highlight fade-in three">business.</span>
</h1>
When I was working with CSS animations, I had to make two animations successive, but as soon as I did that, I just remembered that the animations must repeat infinitely. Is there is any way to make them repeat infinitely in the same order without making the animations one by merging keyframes, using only CSS?
If there isn't, how could I do it with JavaScript?
I tried re-invoking the animation in the last keyframe of the last animation but that didn't work because you can't animate animation.
.div{
animation: spin 1.6s ease-in-out 0s 1 normal running,
rotate 1s ease-in-out 1.5s 1 normal running;
}
#keyframes spin {
from {
transform: rotateX(0deg);
}
99% {
transform: rotateX(360deg);
}
100% {
transform: rotateX(360deg);
animation: spin 1.6s ease-in-out 0s 1 normal running,
rotate 1s ease-in-out 1.5s 1 normal running;
}
}
#keyframes rotate {
from {
transform: rotatez(0deg) rotatey(0deg);
}
to {
transform: rotatez(-33deg) rotatey(-37deg);
;
}
}
Simply create a new animation based on your requirements:
.box{
background:red;
width:100px;
height:100px;
animation: spin 2.6s ease-in-out infinite;
}
#keyframes spin {
0%{
transform: rotateX(0deg);
}
61.54% { /*1.6s */
transform: rotateX(360deg) rotatez(0) rotatey(0) translateZ(0);
}
100% {
transform: rotateX(360deg) rotatez(-33deg) rotatey(-37deg) translateZ(1000px);
}
}
<div class="box">
</div>
I have two pictures that I want them to blink alternatively. I used CSS and javascript to blink individual picture but failed to make the second picture start to show up at the offset of the first picture. Is there any way to control the timing?
tried: first picture used the following and the second one reversed the opacity.
.blinking{
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
animation: blink 1s infinite;
}
#-webkit-keyframes blink{
100%{ opacity:1;}
0%{opacity:0;}
}
#-moz-keyframes blink{
100%{ opacity:1;}
0%{opacity:0;}
}
#keyframes blink{
100%{ opacity:1;}
0%{opacity:0;}
}
Try using animation-delay
.blinking {
animation: blink 1s infinite;
}
.delay {
animation-delay: .5s;
}
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="blinking">image 1</div>
<div class="blinking delay">image 2</div>
Check out the animation delay property. You may be able to time the delay to start when the fist image is mid-blink.
https://www.w3schools.com/cssref/css3_pr_animation-delay.asp
I have this .png that I wanted to make it bounce a little every time it detects a scroll movement but I'm not good in javascript and css. I hope you guys can help me
<div class="arrownav bounce">
<a href="" class="logo">
<img src="{{ asset('assets/img/arrow down.png') }}" height="45">
</a>
</div>
I am now using a css that made the image bounce
this is the code:
.bounce {
-webkit-animation:bounce 1s infinite;
-moz-animation:bounce 1s infinite;
-o-animation:bounce 1s infinite;
animation:bounce 1s infinite;
}
#-webkit-keyframes bounce {
0% { bottom:0px; }
50% { bottom:15px; }
100% {bottom:30;}
}
#-moz-keyframes bounce {
0% { bottom:0px; }
50% { bottom:15px; }
100% {bottom:30;}
}
#-o-keyframes bounce {
0% { bottom:0px; }
50% { bottom:15px; }
100% {bottom:30;}
}
#keyframes bounce {
0% { bottom:0px; }
50% { bottom:15px; }
100% {bottom:30;}
}
The first thing I noticed is the missing unit in all #keyframes, right here:
100% {bottom:30;}
This should be:
100% { bottom:30px; }
You've used the bottom style in you animation, which is perfectly fine, but in order for it to work the element's position needs to be either relative, absolute or fixed (more here).
.bounce {
position: relative;
-webkit-animation: bounce 1s infinite;
-moz-animation: bounce 1s infinite;
-o-animation: bounce 1s infinite;
animation: bounce 1s infinite;
}
Here's a working fiddle.
Bonus
Another way to change the element's position in the animation is the transform style, instead of using bottom. When you use transform, you don't need position: relative;.
#keyframes bounce {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-15px);
}
100% {
transform: translateY(-30px);
}
}
Fiddle
I've been using HTML5 and Css3 to build an animated banner, but I have a few issues I can't find a work around for at the moment.
Heres a quick bit of code to use for an example, imagine this is a div layer with an image assigned to it.
First off is Opacity, it works until the end of the timeline animation then re-appears, is there a css way to get round this or would I have to use javascript?
Secondly is transition delay, I would of thought I could do a keyframe delay and freeze it for a few seconds inbetween each transition, but it never takes effect. If anyone can help I'd aprpeaciate it!
#-webkit-keyframes animation {
0% {
opacity:1;
-webkit-animation-timing-function: ease;
-webkit-transform: translateY(0px);
}
50% {
-webkit-transition-delay:10s;
opacity:1;
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateY(300px);
}
100% {
opacity:0;
-webkit-animation-timing-function: ease-inout;
-webkit-transform: translateY(900px);
}
}
#animation {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: animation
}
FIrst off is the delay command, Transition-delay and animation-delay, both
*******Update************
Opacity is solved, to get it to finish after the animation, have your First frame 0% set to opacity 0. If that's a problem set a frame to 1% set it to opacity 1.
Then add forwards on the end of your animation i've been doinbg it shorthand so something like this.
#bannerImg {
-webkit-animation: bannerImg-animation1 3s 0s 1 ease-in-out forwards}
I couldn't find a way to make the code nice to look at but since starting delays and animations from within an animation itself does not seem to work I stuck the following together:
#-webkit-keyframes animation {
0% {
opacity:1;
-webkit-animation-timing-function: ease;
-webkit-transform: translateY(0px);
}
18.75% {
opacity:1;
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateY(300px);
}
81.25% {
opacity:1;
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateY(300px);
}
100% {
opacity:0;
-webkit-animation-timing-function: ease-inout;
-webkit-transform: translateY(900px);
}
}
#animation {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 16s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: animation;
}
JSFiddle
This solution just uses 18.75% and 81.25% as markers for the delay, changing nothing during that time (10 seconds).