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.
Related
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;
}
}
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');
Background:
Trying to create an esthetically pleasing linking hover for the future
Current JSFiddle:
Available here for FF Browser.
body {
color:#ffffff;
font-family:"Helvetica";
font-size:12pt;
background-color:#000000;
font-weight:bold;
}
a:link {
color:white;
text-decoration:none;
}
a:hover {
animation: myhover 1s;
transition-timing-function: ease-in-out;
font-weight: bold;
}
#keyframes myhover {
from {
background-color: black;
color: white;
}
to {
background-color: white;
color: black;
}
}
Problem:
The transition works in what concerns the effect, but for some reason, even if you remain with the cursor on top of the link, it reverts to the FROM state without even a fade back from TO to FROM.
Need:
What code change is needed to stay at TO effect, until you take the cursor out of the hovered LINK and it reverts the effect to FROM?
Code type restrictions:
I do not wish to use JavaScript or JQuery in the solution, only CSS and HTML.
Many Thanks
Alban
There are two parts to your question:
1) How do you retain the current animation state?
Add animation-fill-mode to your CSS rule:
a:hover {
-webkit-animation: myhover 1s;
animation: myhover 1s;
transition-timing-function: ease-in-out;
font-weight: bold;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
2) How do you revert to the "From" transition
Fairly straight forward - you set the "default" animation properties of the link.
a:link {
-webkit-animation: nohover 1s;
animation: nohover 1s;
color:white;
text-decoration:none;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
The only issue you might run into is the page load. You'll notice the animations kick off before any interaction occurs (for -webkit-based-browsers). Without JavaScript, you'll need to consider this and how your animations will look.
A fiddle for demonstration: http://jsfiddle.net/6hxhxg5t/
You need to set the animation-fill-mode to forwards for the animation to retain the state as at its last keyframe.
animation: myhover 1s forwards;
or
animation-name: myhover;
animation-duration: 1s;
animation-fill-mode: forwards;
Option 1 Demo | Option 2 Demo
Note:
The demo uses -webkit- prefix as I am testing on Chrome, but the same would work with either the -moz- prefix or without any prefixes.
Achieving a reverse effect on hover out would not be possible without adding extra code as animation do not work like transition. The reverse effect would be better achieved with JavaScript/jQuery as the reverse animation cannot be kicked-off by default on the base class without it appearing once on page load also. Here is a way to achieve both the forward and reverse animation effects using jQuery. jQuery is not a must and the same can be done with vanilla JS also but I just used jQuery for doing a quick sample.
Option 3: (Using transtions instead of animations)
If your objective is only to linearly change the background-color and the color properties on mouse hover, then actually transition is a much better option to make use of instead of animation. Transitions can automatically answer both of your concerns. It can make the end state retained till the mouse is hovered out and the hover out will also cause the reverse effect to happen.
a:link {
color:white;
text-decoration:none;
transition: background-color 1s, color 1s;
/*transition: all 1s;*/ /* use this line if you wish to transition all properties */
transition-timing-function: ease-in-out;
}
a:hover {
font-weight: bold;
background-color: white;
color: black;
}
Option 3 Demo
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.