I am designing a website theme in which I can only change the CSS, not the JavaScript or HTML source. There is a div element (not a link) that I want to show an APNG (like an animated GIF) background image when clicked. The problem is that the div doesn't remain active after the mouse button is up, so the animation doesn't usually get a chance to play through. Is there a way to prevent the background from going back to its normal state until after a delay?
I thought maybe a CSS #keyframe animation would work, but I'm not sure. The image is just an expanding gradient, so the image could be replaced with that (I think the image is easier because gradients aren't animatable either.
You can fake a click and keep the change 'active' by using a very long transition and adjusting the transition-delay on the initial and :active states.
.box {
width:100px;
height: 100px;
border: 1px solid grey;
margin: 1rem auto;
background-color: #f00;
transition-property: background-color;
transition-duration: 9999s;
}
/*.box:hover,*/
.box:active {
background-color: #00f;
transition-duration: 0;
transition-delay: 0s;
transition-timing-function: linear;
}
<div class="box"></div>
Related
I am having trouble running a single animation using different divs. I just want to switch between different backgrounds using opacity in animation but i can't run it on different divs in a single animation
I have tried to make this animation on section container it was done but it does not give me transition with it I also want some transition so that's why I want to run this animation using different divs just like the one made on fivers homepage...!!
You can apply same animation on different elements by just giving all the elements(on which wanted animation) a same class and then selecting that class by dot operator and then in css rule define the animation property. Now, all elements will get this animation.
Suppose in html we have many divs on which we had applied some background color or image. And we want that there is a animation on all of them that firstly the background is light and with time background becomes dark(its original color).
So defining a single keyframe:-
HTML CODE
<div class="red same-animation"></div>
<div class="blue same-animation"></div>
<div class="green same-animation"></div>
<div class="yellow same-animation"></div>
CSS CODE
div{
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
opacity: 0 ;
}
.red{
background: red;
}
.green{
background: green;
}
.blue{
background: blue;
}
.yellow{
background: yellow;
}
.same-animation{
animation: change-opacity 5s ease-in-out 0s 1;
}
div:hover{
transition: all 5s;
opacity: 1;
}
#keyframes change-opacity {
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
LINK OF CODE - https://codepen.io/aryansharma-2002/pen/mdpRoqW
So in this example firstly animation will be done in 5second to all divs such that there opacity will increase then all will disappear. Then if hover on any div then it will visible with transition. So tried to explain both concepts.
If any doubt or suggestion, please comment
So I’m doing CSS, and I’ve started styling my inputs & buttons. I have a set-up where the bottom border of the button is wider, and clicking the button shortens the border and moves the button downwards, creating a pseudo-3d “push” effect. The problem is that when I press down the button, the content below it moves up. this should not happen, because (from my understanding), the bottom of the button is in the same place. I enabled an outline on the button, which does not move the whole time. Then, I thought I could push the content back, by increasing the bottom margin. This keeps the below content at the same distance when the animation ends, but it jitters around during the animation, so it is still sub-optimal.
Here’s my code (I’ve included an example of a button with and without the changing margin):
button {
background-color:#f8f8f8;
border: solid 1px #ccc;
border-bottom:solid 3px #ccc;
padding:4px;
transition:border-width 0.2s ease, transform 0.2s ease, margin-bottom 0.2s ease;
margin-bottom:4px;
outline:solid 1px #000;
}
button:active {
border-bottom-width:1px;
transform:translateY(2px);
}
.margin-button:active {
margin-bottom:6px;
}
<p>text</p>
<p><button>button with static margin</button></p>
<p>text</p>
<p><button class="margin-button">button with changing margin</button></p>
<p>text</p>
So my question is: How can I remove the jitter with the changing margin, or is there a completely different way I can be doing this that would work out better?
JSFiddle example: http://jsfiddle.net/Cyoce/jknx5c66/
Edit:I forgot to mention this, but I’d like the bottom border—or whatever is used to recreate/simulate it—to change colors (in this case, #0af) when hovered over.
You could use a box-shadow instead of a border and then animate the box-shadow and transform.
The jitter occurs because everytime the border or margin changes, it has to redraw the page, which is very inefficient.
It's better to animate properties that do not trigger a repaint (such as transform and border-box).
Here's an example:
http://codepen.io/TheDutchCoder/pen/ogdLQG
button {
position: relative;
padding: 10px 20px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
background-color: #eee;
transition: all 0.15s ease;
box-shadow: 0 3px 0 0 #ccc;
}
button:focus,
button:active {
transform: translateY(2px);
box-shadow: 0 1px 0 0 #ccc;
}
Reinier Kaper suggested a good solution and explained its advantages in his answer pretty well.
But, if you do insist on using the border-bottom (or similar) attribute as the core of your transition, I know two possible workarounds that I regularly use myself:
make the button element floating, by applying for example float: left, or
give the button's container a fixed height.
Working example on JSFiddle featuring both approaches.
As a site node - and only on my opinion - making your elements slow to mouse gestures should be avoided: I suggest adding a transition-duration: 0 property to the :active element: http://jsfiddle.net/jknx5c66/5/
My site is using fontawesome. On the site, one of the icons (fa-arrows-h) is wrapped in a span tag, basically like this:
<span id="myArrow">
<i class="fa fa-arrows-h"></i>
</span>
I have various styles set for this arrow in an external stylesheet, including a :hover transition. Other styles include font-size 41px and the arrow has position absolute. I have also styled the cursor to be a "pointer" and for the red arrow to become orange (using the CSS3 style: transition: all 0.5s ease 0s;) on hover.
EDIT: Here are all the CSS rules:
#myArrow {
display: none;
font-size: 41px;
position: absolute;
z-index: 100;
color: red;
transition: all 0.5s ease 0s;
}
#myArrow:hover {
color:orange;
cursor:pointer;
}
Here is some jQuery that fades the arrow In:
$("#myArrow").css({"left" : (o.left + 740) + "px", "top" : (o.top) + "px"}).fadeIn(500);
One annoying thing is that the hover effect occurs about 20px above/below the text. That is, when either the bottom of the cursor touches the arrow, or the tip of the cursor is roughly 20px below the arrow, the hover transition occurs.
I have tried various things, even setting the style for both the span and the i to
style="line-height:0;height:0"
and the arrow still appears, with the same hover issue as described above (I also tried this styling individually for both tags).
I thought the issue also might be with the css display, so I tried setting both the span and the i to
- block
- inline
- inline-block
with no success.
I also set both the tags to have padding:0 with no success.
Note that this 20px-away hover transition only occurs vertically; when approaching the arrow horizontally (from left or right) the hover transition occurs when the user has actually hovered over the icon.
Can anyone please suggest how I would make the hover transition occur when a user approaches this icon from above or below and actually hovers over the fontawesome icon, not when the cursor is 20px away?
While not super elegant, I simply changed the #myArrow's height and set its overflow to hidden then I used margins to position the i element within.
#myArrow {
font-size: 41px;
position: absolute;
z-index: 100;
color: red;
transition: all 0.5s ease 0s;
}
#myArrow:hover {
color:orange;
cursor:pointer;
}
#myArrow {
height:20px;
overflow:hidden;
}
#myArrow i {
margin-top:-10px;
display:block;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<span id="myArrow">
<i class="fa fa-arrows-h"></i>
</span>
I am trying to create a menu that fades in/out when a button is clicked, and I am trying to do the animation using CSS transitions.
Here is a sample of what I want to achieve
#menu{
background: red;
display: block;
overflow: hidden;
position: absolute;
width: 182px;
top: 1em;
padding: 0;
height: auto;
opacity: 0;
/* The menu must not be clickable/cover the UI once hidden */
left: -100000px;
/*
The left property must change after the
opacity is zero and before it starts to
increase
*/
transition: opacity 0.25s 0.1s, left 0s; /* ??? */
-webkit-transition: opacity 0.25s 0.1, left 0s; /* Safari */
}
#menu.open{
opacity: 1;
left: auto;
}
http://jsfiddle.net/AzKAk/5/
Of course that only works half way, when the menu appears it DOES fade in, but when it has to fade out, this must happen after the element has its proper position.
Is it possible to do such thing using only CSS3?
I am assuming your intention is to have the menu appear/disappear in-place without any movement.
To do that you actually have to use a combination of two properties: opacity, and display.
The change in opacity will make the menu disappear, but once it reaches opacity:0 it will be invisible but still exist and receive user interaction.
So, you have to make sure that after the opacity transition is done, you have to change the display to none.
You can do this using the transitionend event (webkitTransitionEnd on Chome/Safari).
Your code would look something like this: http://jsfiddle.net/daniran/GfbVV/
I'm using jQuery in the example, but you can just as easily register the listeners directly using ontransitionend property;
How do I use CSS3 to fade out but not in. I.E. when I apply a class to an element I want the background to change color immediately with no delay or transition, and when I remove it I want the background to fade out according to a transition. I know it should be simple but i haven't managed to figure it out yet.
Specify the transition times for the element with and without the class.
.el {
background: red;
-webkit-transition: background .5s;
}
.el.hover {
background: blue;
-webkit-transition: 0;
}