Targeting a specific image for animation - html

I used CSS flashing property to animate a specific image and there are several sources online in this regard, but none of them are talking on how to target a specific image in the HTML page. I have several images linked in my HTML page and I just want one of the images to blink/flash not all of them. I used below code and now all of my images are blinking. I tried a lot to paste/write my css code here, but it looks like the system is not allowing me because the of the formatting, while I don't see any issue with my code format.
#keyframe blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
flashing-effect img { animation: blink 1s; animation-iteration-count: infinite; }

All you need to do is add a class name to the image you wish to be blinking.
Such as:
<img src="..." class="flashing-image"/>
Then, in your CSS, target it appropriately:
.flashing-image {
animation: blink 1s infinite;
}

Related

Css auto hide / show every 2s

I want to hide and show a div using css like :
Show => Hide => Show =>...
for do that I've tried that code:
#showMe {
animation: cssAnimation 0s 2s forwards;
visibility: hidden;
}
#keyframes cssAnimation {
to { visibility: visible;
}
}
but it will hide it only plz guys help!!
One way to do this is by adding keyframes for a specific progress (time-progress).
Some attributes in CSS are not animateable, so if you try to animate them they get instantly set to your "to" value, which is visible. To work around this, we simply set the visibility to hidden(in css) and keep it until 50% (in animation). At 51% we set it to visible, where it gets instantly shown (until the end).
To make it "blinking" you can repeat this animation by appending infinite which is a shorthand for animation-iteration-count: infinite.
#showMe {
animation: cssAnimation 1s infinite;
visibility: hidden;
}
#keyframes cssAnimation {
50% {
visibility: hidden;
}
51% {
visibility: visible;
}
}
<div id="showMe">(╯°□°)╯︵ ┻━┻</div>
Try to add property animation-iteration-count and set value it to infinite. It should play the animation infinite times.

How to create an ease-in-out for image hover replacement in html?

Here is the image replacement code I am currently using in various parts of our website, to do a hover image replacement. My question is how to add an ease-in-out .5s to the existing code, or an alternative CSS code to our stylesheet for use throughout our website. I am looking to create a smoother transition between images. Thank you in advance for your help.
<img src="https://gingerhippo.com/wp-content/uploads/2018/04/GingerHippo-Search-Services-3-1.jpg"
onmouseover="this.src='https://gingerhippo.com/wp-content/uploads/2018/04/Ginger-Hippo-Search-Services-1-1.jpg'"
onmouseout="this.src='https://gingerhippo.com/wp-content/uploads/2018/04/GingerHippo-Search-Services-3-1.jpg'"
>
On our home page, you will see 7 different image hover replacement images, all with no transition timing. I've managed to create background transitions for what looks like buttons on our blog and industry articles pages, but can't replicate the process for our main page imagery.
Thank you again in advance for your help. I've been stuck on this for a couple of months.
Put the two images in an outer block element.
<section>
<img class="bottom" src="img.png">
<img class="animation" src="img-2.png">
</section>
The outer will be relative and the inner will be absolute.
section {
position: relative;
}
section img {
position: absolute;
}
Create the animation and apply it to the top element.
.animation {
animation-name: fade;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-direction: alternate;
}
#keyframes fade {
0% {
opacity: 1;
}
25% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
Now if you want to edit the animation effect make changes in .animation.
Source: https://www.taniarascia.com/crossfade-between-two-images-with-css-animations/
You can also use this Example
var $this = $(this);
var newSource = $this.data("alt-src");
$this.data("alt-src", $this.attr("src"));
$this.attr("src", newSource);
};
$(function() {
$("img.demo-img").hover(sourceSwap, sourceSwap);
});
<img class="demo-img" data-alt-src="image-2.png" src="image-1.png" />

Fade image on-load using css3

This is my code:
http://jsfiddle.net/NVk2N/2/
I'm trying to fade the large background image in. I tried this:
#cover {
background: url(http://bootstrapguru.com/preview/cascade/images/carousel/imageOne.jpg) no-repeat center center fixed;
background-size: cover;
height:100%;
width: 100%;
position:fixed;
opacity:0;
transition: opacity 2s;
}
however the image never appears. What am I doing wrong?
James
You actually need an animation of the opacity, in which you set animation-fill-mode: forwards so the last frame continues to apply after the final iteration of the animation.
Updated fiddle: http://jsfiddle.net/NVk2N/7/
#cover {
...
-webkit-animation: 2s show;
-moz-animation: 2s show;
-ms-animation: 2s show;
animation: 2s show;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#-moz-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#-ms-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
(of course you need to use vendor prefixes where necessary)
Note: If you need to fade-in only the background image (and not the whole element) you could load the background inside an absolute positioned pseudoelement (e.g. #cover:before) with a negative z-index and just apply the animation to the psuedoelement itself:
Here's an example on codepen: http://codepen.io/anon/pen/EJayr/
Relevant CSS
#cover {
position: relative;
width : ...;
height : ...;
}
#cover:before {
content : "";
position: absolute;
z-index : -1;
top : 0;
left : 0;
width : 100%;
height : 100%;
background: url(...) top left no-repeat;
-webkit-animation: 5s show;
-moz-animation: 5s show;
-ms-animation: 5s show;
animation: 5s show;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
Animations on pseudoelements work fine on every modern browser (except in Chrome < 26 — as reported on issue #54699 — but not really a problem, since the current version at this moment is 34.0.1847.116)
you need to use some js code to trigger the animation property. just add a new class for #cover with opacity:1 and on body load assign this class to cover.
example
<body onload="document.getElementById('cover').classList.add('showed');">
To trigger a transition you actually need a trigger.
You are setting a opacity of "0" and this is what you get: 0 opacity.
The transition would work if the declaration of opacity would change from 0 to 1.
That is what transitions do.
The solution of Fabrizio Calderan with the Animation should do the job.
Working with the other answers that have been given will give you a fade on all the elements within that element so this will no achieve your desired result.
The best way to do this is to:
1) Create a div with a z-index of 1 which holds your background image and what you want to fade
2) Create another div with a z-index of 10 which holds your content which you dont want to fade and position it over the background div with position absolute.
3) Animate the background image with jquery animate
I hope this helps and that will give you your desired outcome!
I believe you may use keyframes and animations to get the job done.
It's not possible with purely css to fade only the background image. Reference: How to fade in background image by CSS3 Animation
The answer there explains that you may use <img> inside a <div> that you apply the fade animation on as there is no other way without anything but css.

Pure Fullscreen CSS Slideshow with double fade in/out effect for displaced elements on background slide elements

I'm trying to have this slide show jsfiddle with cover background images slides and displaced text on it, working without the auto loop animation, only by buttons.
All elements of the slideshow have separate fade in/out applied, so background is shown before text.
Try to click on buttons, everything work fine, but I'm not able to remove autoloop.
Probably I've to change animation for transition,and remove -webkit-animation: titleAnimation 24s linear infinite 0s; on all elements, I don't know. I've tried but without success.
I've solved my problem, I put here the solution, could be interesting for someone seeking for something like this. I wasn't able to find something similar online.
I have updated the animations like this:
/* Animation for the slideshow images */
#-webkit-keyframes imageAnimation {
from {
opacity:0;
}
to {
opacity:1;
}
}
/* Animation for the title */
#-webkit-keyframes titleAnimation {
from {
opacity:0;
}
to {
opacity:1;
-webkit-animation-fill-mode:forwards; }
}
and added an animation fill mode to the elements to force them stay at last animation frame (still visible with opacity:1)
-webkit-animation-fill-mode:forwards;
Here the DEMO

Change background color of DIV after autoscroll

I have a menu that links to different divs on a single page using hash tags after the page name (i.e. my-page.html#section1).
After the user scrolls to whatever section of the page they selected is there a way to briefly change the background color of that div?
The reason for this is that I want the user's eyes to immediately go to the section they selected. The reason this may not happen sometimes is that there will be 2 section within the screen space.
Thanks!
Sam
SOLUTION
Simply add this to your style sheet:
:target {
-webkit-animation: target-fade 3s 1;
-moz-animation: target-fade 3s 1;
}
#-webkit-keyframes target-fade {
0% { background-color: rgba(228,201,128,.3); }
100% { background-color: rgba(228,201,128,0); }
}
#-moz-keyframes target-fade {
0% { background-color: rgba(228,201,128,.3); }
100% { background-color: rgba(228,201,128,0); }
}