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); }
}
Related
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.
I want elements to appear one by one on the page with an animation. I created the animation but I don’t know how to hide (not display: none) the element while delay function is in use.
So, after 1 second, element appears with appear animation, however there must be something else to hide it before animation starts.
.insta {
animation: appear 0.4s linear 1s;
}
#keyframes appear {
0% {
opacity: 0;
transform: translateX(30%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
<p class=«insta»>Instagram</p>
Set opacity: 0. That hides your text. Using animation-fill-mode: forwards will let you have the properties added at the end of the animation.
You can solve it by adding an animation-fill-mode: both; to your CSS. That means that the browser will apply the animation's first frame until it starts, and its last frame after it has finished.
Since your animation starts with opacity: 0; and ends with opacity: 1;, no further modifications required.
You can also combine it into the animation property (just add a both keyword somewhere):
.insta {
animation: appear 0.4s linear 1s both;
}
#keyframes appear {
0% {
opacity: 0;
transform: translateX(30%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
<p class="insta">Instagram</p>
Try on CodePen (at least until the Stack Snippets server is down...)
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;
}
I'm trying to use CSS animations to make a hyperlink blink until it has been visited. However, my current code doesn't work – it continues blinking even after it is clicked.
How can I cause the link to stop blinking after it has been visited?
My CSS:
blink {
-webkit-animation: 0.5s linear infinite condemned_blink_effect;
animation: 1.5s linear infinite condemned_blink_effect;
}
#-webkit-keyframes condemned_blink_effect {
0% {
visibility: hidden;
}
50% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
#keyframes condemned_blink_effect {
0% {
visibility: hidden;
}
50% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
blink:visited{
-webkit-animation: none;
animation: none;
}
My PHP code that generates the link HTML is:
echo "<td width='150'><a href='dispdata.php?id=" . $dataReturn->dataID . "'><blink>View </a><blink></td> ";
The <blink> element was never part of the HTML standard and was a joke added in a version of Netscape at some point. Modern browsers don't support this element at all because everyone agrees blinking elements are annoying. See more details here.
You can still produce a blinking effect through CSS like you tried, but your selectors are incorrect. :visited can only apply to links (<a> elements) but you wrote blink:visited. That won't work, as this means "select all <blink> elements that are also visited <a> elements". An element can't be both, so the selector never works.
Finally, the styles that can be set on a :visited selector are limited because of the potential security risks. One could abuse this selector to steal a user's browsing history. See more details here. If you want to make a specific link open a page in a new tab and then stop blinking, you will need JavaScript.
For example, you could use a blinking CSS class to make the link blink and then remove the class from the element when it is clicked. In this code, I put the blinking effect on a nested <span> element because otherwise you wouldn't be able to click the link while it is hidden by the animation.
Again, this is not something I would recommend using at all as it will annoy your users.
function stopBlinking(e) {
e.currentTarget.classList.remove("blinking");
}
const blinking = document.querySelectorAll(".blinking");
for (link of blinking) {
link.addEventListener("click", stopBlinking);
}
.blinking span {
-webkit-animation: 0.5s linear infinite condemned_blink_effect;
animation: 1.5s linear infinite condemned_blink_effect;
}
#-webkit-keyframes condemned_blink_effect {
0% {
visibility: hidden;
}
50% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
#keyframes condemned_blink_effect {
0% {
visibility: hidden;
}
50% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
<span>Sample link</span><br>
<span>Sample link</span><br>
<span>Sample link</span>
I'm trying to make an infinite horizontal slider with 3 rows of images.
It looks like this:
But as you see when the end of the rows of images arrive, there's a huge blank space while the image finally appears again.
You can test it live here: http://jsfiddle.net/tbergeron/q596y/6/
Here's the CSS behind it:
ul.lists {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
-webkit-animation: moveSlideshow 180s linear infinite;
-moz-animation: moveSlideshow 180s linear infinite;
}
ul.lists li {
list-style: none;
display: inline-block;
}
ul.lists li img {
display: inline-block;
width: 100px;
height: 100px;
}
ul.slider2 {
top: 140px;
}
ul.slider3 {
top: 280px;
}
#-webkit-keyframes moveSlideshow {
0% {
-webkit-transform: translateX(0);
}
100% {
-webkit-transform: translateX(-300%);
}
}
#-moz-keyframes moveSlideshow {
0% {
-moz-transform: translateX(0);
}
100% {
-moz-transform: translateX(-300%);
}
}
What I'd like to happen is to never see that blank space, I would like it to roll on forever. Anyone has an idea on how to achieve this behavior?
Thanks and have a nice day.
basicly , You need to clone your elements.
At least many enough of the first ones to fill the entire width of the screen, or split into two differents tags, your elements.
So once a part of them, is gone left, you move them back to the right end to fill that empty space to keep scrolling without any gaps.
Your case requires javascript.
So many images wrapping line by line needs to clone the whole ul.
A good compromise could be to split content within two ul, so one can to next once of screen.
To duplicate the whole ul in the HTML document might not be a good idea and i would not advise to do so for text.
jQuery DEMO of your fiddle.
$(".lists.slider1").clone().appendTo("body");
$(".lists.slider2").clone().appendTo("body");
$(".lists.slider3").clone().appendTo("body");
But for small "marquee like" , you can use pseudo elements to clone the first few images.
For text of a known length(em) or known container's width , you may use text-shadow.
Pseudo and text-shadow avoid duplication of content.
Some horrible CSS example that demonstrate the cloning idea: http://dabblet.com/gist/5656795