Develop Reference

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

When using #keyframes to fade-out with opacity, how do I repeat the animation with the event?

I am making a label pop up for the user, if the user tries to drag and drop an element that has already been dragged.
Problem is, that the animations only happens once, and at the end of the animation, it will have an opacity of 0 forever.
CSS
#keyframes smooth {
0% { opacity: 1;}
100% { opacity: 0;}
}
.o_tip{
position: absolute;
z-index: 999;
display: none;
opacity: 0;
-webkit-animation: smooth 2s ease-in;
-moz-animation: smooth 2s ease-in;
-o-animation: smooth 2s ease-in;
-ms-animation: smooth 2s ease-in;
animation: smooth 2s ease-in;
}
To illustrate my problem, if I 'end' the animation on opacity: 0.2 instead of opacity: 0:
#keyframes smooth {
0% { opacity: 1;}
100% { opacity: 0.2;}
}
... then the label will reappear for each event - but it will not fade out again, which I want to do.

You can put the animation rule in a specific css class rule, and then on clicking add that class again. Just keep these points in mind:
You need to remove the animation class first before adding it again to have any effect.
Even if you follow first point, removing the class and adding it back right then won't have any visual effect. To trigger reflow, you can use this statement: void targetDiv.offsetWidth;.
document.querySelector("#start-animation").onclick = function(e){
var targetDiv = document.querySelector("#mydiv");
targetDiv.className = "";
void targetDiv.offsetWidth; // this triggers UI reflow
targetDiv.classList.add("o_tip");
}//onclick
#keyframes smooth {
0% { opacity: 1;}
100% { opacity: 0;}
}
.o_tip{
z-index: 999;
animation: smooth 2s ease-in forwards;
}
#mydiv{
background-color: yellow;
height: 50px;
width: 100px;
}
#mydiv.o_top{
display: block;
}
<div id="mydiv"></div>
<button id="start-animation">Start animation</button>

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

Fade boxes after each other in

I want to fade in all boxes at my site . But not like it works already. I want that first the last box fades in and then is moving down by the info box etc. so the boxes appears after each other.
The fadein effect is currently made with:
.content {
-webkit-animation: fadein 3s;
-moz-animation: fadein 3s;
-ms-animation: fadein 3s;
-o-animation: fadein 3s;
animation: fadein 3s;
background: rgba(49,54,59,0.8);
*zoom: 1;
}
#keyframes fadein {
0% { opacity: 0; }
75% { opacity: 0.3; }
100% { opacity: 1; }
}
#-moz-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-webkit-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
It is possible to use jQuery, JavaScript and Css.
I hope you'll ahve a solution.

The jQuery fadeIn function (and most animations) has a "complete" option. You can pass another animation call to it and chain them in order to achieve the proper order.
For instance, you can do:
$( "#box1" ).fadeIn( "slow", function() {
// Animation complete
$( "#box2" ).fadeIn( "slow", function() {
// Animation complete
});
});

You can use animation-delay to delay the animations so the boxes fade one after another.
div {
/* Will cause animation to start after 2 second delay */
-webkit-animation-delay: 2s;
animation-delay: 2s;
}

Best solution:
<script type="text/javascript">
$(document).ready(function() {
$(".content:hidden:last").delay(500).slideDown(1000, function() {
$(".content:hidden:last").delay(500).slideDown(1000, function() {
$(".content:hidden:last").delay(500).slideDown(1000, function() {
//nothing
});
});
});
});
</script>
For fading just replace slideDown with fadeIn

You can do this with just css using something like stagger.css
http://digitalfio.github.io/Stagger.css/
Include the css file in your <head>, apply the animation classes to each div then add a timing class to each div in the form of an underscore followed by an incrementing number - e.g.
<div class="animated slideIn _1"></div>
<div class="animated slideIn _2"></div>
<div class="animated slideIn _3"></div>
<div class="animated slideIn _4"></div>
so you get something like this: http://output.jsbin.com/cusuz/4

CSS3 Animation - Infinite moving arrow

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