CSS3 Animation - Infinite moving arrow - javascript

In this website link an arrow is moving i want to know to how to set this effect in CSS
i have a code
-webkit-animation: new_icon 2s linear 0s infinite alternate;
But for the moment this dosnt work.

You need to declare your animation details for new_icon - see the code in the CSS file on the site you refrence. You'll need to change the ID names accordingly.:
#-webkit-keyframes new_icon {
0% { -webkit-transform: translate(0px, 5px) ; }
100% { -webkit-transform: translate(0px, -15px); }
}
#-moz-keyframes new_icon {
0% { background-position: 0 0; }
100% { background-position: 0 600%; }
}
#lp-pom-image-350, #lp-pom-image-472, #lp-pom-image-473, #lp-pom-image-474, #lp-pom-image-475{
animation: new_icon 1s linear 0s infinite alternate;
-webkit-animation: new_icon 2s linear 0s infinite alternate;
}

You need to set up a css animation. The following one should do the trick:
#-webkit-keyframes bounce {
50% {
-webkit-transform(translateY(-30px));
}
100% {
-webkit-transform(translateY(0px));
}
}
/* For firefox and others than webkit based browsers */
#keyframes bounce {
50% {
transform(translateY(-30px));
}
100% {
transform(translateY(0px));
}
}
And then add this to the arrow class:
.your_arrow_class
{
-webkit-animation: bounce 2s linear 0s infinite alternate;
animation: bounce 2s linear 0s infinite alternate;
}

its because you would also need the animation set.
in this case the animation is called:
new_icon
for further information how it works read this about css3 animations
the new_icon animation would probably look like this:
so add this to your css ( don't forget to prefix it) and it should work.
#keyframes new_icon {
0% { top: 275px; }
100% { top: 300px; }
}
greetings timmi

Related

When working with css animations, is there is any way to make successive animations repeat infinitely in the given order

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>

Perfectly smooth looped eased css animation

I'm trying to animate an element to slowly move from left to right a small distance and do it in a smooth way but the result is not very good.
Here is what I have so far:
.animate_sideways{animation:sideways 5s linear infinite; animation-timing-function: ease-in, ease-in-out;};
#keyframes sideways {
50% {
transform: translateX(30px);
}
100% {
transform: translateX(-30px);
}
}
I think the problem is related to the missing start point in the keyframes for the transform attribute.
A minor tweak to your code should correct the issue.
A different animation-timing-function value or time frame (less that 5s for example) may suit you better as well.
.contain { width:100% }
.animate_sideways {
width:40px;
height:40px;
background:#482;
animation:sideways 5s linear infinite;
animation-timing-function:ease-in, ease-in-out;
}
#keyframes sideways {
0% { transform: translateX(-30px) }
50% { transform: translateX(30px) }
100% { transform: translateX(-30px) }
}
<div class="contain">
<div class="animate_sideways"></div>
</div>

How do you make pictures blink alternatively

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

How to bounce animation when scroll?

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

delayed logo fading into website?

Just wondering whats the best way to go about having the logo in top left corner to fade in after about 5 seconds after user has been on page?
Here is the http://jsfiddle.net/elroyz/sjD8X/ with the logo in the corner
body {
background-color:#000;}
i only put this in because it wouldnt let me post without code
i read something about jquery delay but i know next to nothing about it so thought there might be another option
Thanks in advance
$('img').delay(5000).fadeOut(250);
This will fade out the img after 5 seconds. The time in the code is in ms.
Fore more info on this see
api.jquery.com/delay/
api.jquery.com/fadeout/
api.jquery.com/fadein/
try to use this transitions.
http://www.problogdesign.com/coding/get-started-with-css3-transitions-today/
goodluck!
HTML
<img onload="this.style.opacity='1';" src="image path" />
CSS
img {opacity:0;-moz-transition: opacity 2s;-webkit-transition: opacity 2s;-o-transition: opacity 2s;transition: opacity 2s;}
CSS 3 animation. (With vendor prefixes because it is still new and experimental):
#-webkit-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#logo {
-webkit-animation: fadein 5s infinite;
-moz-animation: fadein 5s infinite;
-o-animation: fadein 5s infinite;
animation: fadein 5s infinite;
}

Categories

Resources