Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 months ago.
Improve this question
I want that my text blinks at the rate of 2 times per second.
I tried but failed to get animated text!
A necessary disclaimer: a flashing text/graphic is not a good idea especially for people suffering from photo-epileptic seizures, people with vestibular disorders, or people with cognitive disabilities.
If you still want to blink the text you can use a simple animation that changes the opacity of an element but only for users that didn't choose any preference about reduced motion, e.g.
#media (prefers-reduced-motion: no-preference) {
:where(.blink) {
animation: .5s blink 0s linear infinite;
}
}
#keyframes blink {
0, 100% { opacity: 1 }
50% { opacity: 0; }
}
<p class="blink">Blinking text</p>
if feasible, for accessibility reasons I'd suggest to set at least a finite and small animation-iteration-count, so that the text stops flashing after a short time.
<p>Blinking Text</p>
p {
animation: 0.5s blink linear infinite;
}
#keyframes blink {
50% {
opacity: 0;
}
}
Related
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;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I want to create something like a this loading button after question. It will be nice to get this rotating button for loading anything with pure CSS (not counting the fact that it will be spinning in a click, it will be done with JS). Maybe someone did something like that? Or at least have an idea how to do it. I just know that this is probably possible with transition.
UPD. No images and icons. My question is about, how to create this kind of borders (two arrows), and rotate them on click (can be done with JS).
Here is example of this button:
Using FontAwesome and the built-in CSS3 rotation
jsBin demo
i.fa-refresh{ color: #a05; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<i class="fa fa-refresh fa-spin fa-2x"></i>
https://fortawesome.github.io/Font-Awesome/icons/
https://fortawesome.github.io/Font-Awesome/examples/
Loading Icon (Using plain CSS and CSS3 animation)
.loading{
display:inline-block;
position:relative;
vertical-align:middle;
width: 24px;
height: 24px;
border:2px solid transparent;
border-top-color:#a05;
border-bottom-color:#a05;
border-radius:50%;
animation: rotate 3s linear infinite;
}
.loading:after,
.loading:before{
position:absolute;
content: "";
width:0; height:0;
border:6px solid transparent;
border-bottom-color:#a05;
}
.loading:after{
top:1px;
right:-7px;
transform: rotate(135deg);
}
.loading:before{
top:11px;
left:-7px;
transform: rotate(-45deg);
}
#keyframes rotate{
to { transform: rotate(360deg); }
}
<span class="loading"></span>
Using it with jQuery would end in something like:
jsBin demo
Check out codepen (fair point out: not my codepen) here for some idea of how to create a css only arrow kinda like what you're thinking about:
http://codepen.io/artemdemo/pen/fLcCn/
the circling is not possible with transition effect but its possible with css only assuming you have the rotating icon already, just make a hover animation like:
.rotate{
animation: rotate ease infinite;
}
#keyframes rotate{
to{ transform: rotate(360deg); }
from { transform: rotate(0deg); }
}
and then on click add the class rotate to the element
You can use the Cursor URL property and link it to an animated GIF of your spinner.
/* CSS */
.wait { cursor: url(wait.gif), wait; }
/* JavaScript */
if (waiting)
document.body.classList.add('wait');
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I've been looking through the code of some websites, and notice that the margin sizes change depending on certain actions (eg, mouse hover, screen width) to create a cool dynamic effect.
This effect can be seen here when changing screen width:
http://www.smashbros.com/us/
And here on mouse hover:
http://www.disneyanimation.com/projects
I really have no clue how this is done!
How can the code values automatically change based on certain actions.
Thanks in advance
edit:
I tried something.... but it isn't really giving me the results I want
.cats {
background-color: #eee;
height: 90px;
width: 100%;
}
.cats {
-webkit-animation-duration: 0.5s;
-webkit-animation-name: slide-up;
-moz-animation-duration: 0.5s;
-moz-animation-name: slide-up;
}
.cats {
-webkit-animation: slide-up 0.5s linear;
-moz-animation: slide-up 0.5s linear;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
}
.cats :hover {
/* Toggle the animation play state to running when we are hovering over our sticker */
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
}
#-webkit-keyframes slide-up {
from {
margin-top: 0px
}
to {
margin-top: -15px
}
}
You can achieve this using CSS the hover selector as per #David's answer here:
https://stackoverflow.com/a/905042/3264286
Further details here:
http://www.w3schools.com/cssref/sel_hover.asp
Alternatively, if you are happy to use JavaScript, you can have a lot more power.
http://www.w3schools.com/jsref/event_onmouseover.asp
More discussion:
css hover vs. javascript mouseover
To move gradually, you can apply transition to your div. For example transition: 0.6s;
For more info on transitions property please visit this link.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I need a CSS hover effect for a png image without using two images. Bascially when a user hovers over the png image it would show a glow or other effect without highlighting the whole box but just the png image. I've tried using masking effect but that requires a second image and i have multiple object that don't have same shape and I want to use one css effect for all.
HTML
<div class="brighten pic">
<img src="imgs/bookcase-02.png">
</div>
CSS
/*DARKEN*/
.brighten img {
display: inline-block;
margin: 100px auto;
-webkit-filter: brightness(100%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.brighten img:hover {
-webkit-filter: brightness(120%);
}
Try This:
.brighten img {
opacity: 0.3;
}
.brighten img:hover {
opacity: 1;
}
You want to do something like this in JQuery. Be sure you are calling the JQuery library. I call mine from google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
THEN you want to do something like this:
<script type="text/javascript">
$(document).ready(function () {
$(".YourImageName").mouseenter(function () {
$(this).css('box-shadow', '0 0 2px #888');
});
$(".YourImageName").mouseleave(function () {
$(this).css('box-shadow', 'none');
});
}
</script>
This gives you a shadow around the edges and you can change the color or change the css entirely to better suit your needs.
It would be a little more helpful in the future if you provided us what code you currently have so we have a better understanding of what it is you want. This code is taken from live web use and changed to work for your scenario. You will have to change the class names to yours. Hope this helps!
This question already has answers here:
css3 animation on :hover; force entire animation
(7 answers)
Closed 8 years ago.
I'm running into a small problem attempting to have an animation stopped mid-animation gracefully returning to the default state. I'm applying an animation to a child element using the :hover pseudoclass on a parent element, but would like the animation to gracefully return to the default state when I stop hovering on the element. I'm getting the feeling that I shouldn't be using the :hover pseudoclass here and there's another method of approaching it, but I can't seem to figure out how to get it to transition off. It just instantly reverts to the base state, which of course makes sense because the animation is being stripped - but that's not the desired effect. This is the current HTML:
<div id="el1">
<div class="child"></div>
</div>
and the current CSS
#el1 {
margin-top: 100px;
position: relative;
background: transparent url(./image.png) no-repeat;
height: 100px;
width: 100px;
}
#el1 .child {
height: 100%;
width: 100%;
background-color: white;
opacity: 0;
}
#el1:hover .child {
-webkit-animation-name: semiopacity;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 0.5s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes semiopacity {
from { opacity: 0; }
to { opacity: 0.4; }
}
To recap: There's a flashing white effect over the image when hovering. I want it to animate back to the original keyframe when I stop hovering instead of snapping back to "off". I can change either the HTML or CSS; no restrictions on how to make it work.
css3 animation on :hover; force entire animation
Something similar asked a couple days ago. This person also wanted their entire animation to show after hover was removed. Check it out.