Assuming I have three divs of unknown height of which one has an animated background color using a CSS keyframe animation (see http://css-tricks.com/color-animate-any-shape-2)
#-webkit-keyframes super-rainbow {
0% { background: #ffff00; }
20% { background: #ffcd00; }
40% { background: #c3d74b; }
60% { background: #c3d7d7; }
80% { background: #ffc39b; }
100% { background: #ffff00; }
}
#-moz-keyframes super-rainbow {
0% { background: #ffff00; }
20% { background: #ffcd00; }
40% { background: #c3d74b; }
60% { background: #c3d7d7; }
80% { background: #ffc39b; }
100% { background: #ffff00; }
}
Now, there are two other divs that have a white background. On hover I want those white divs to have an animated background color as well that is in sync with the permanent color animation. I am aware that a native sync isn’t supported (see How To Sync CSS Animations Across Multiple Elements?).
My first approach would be to have three divs that all have animated background colors and cover two of them with white divs, positioned relative. On hover those white divs would then turn transparent and reveal the divs with the animated background (see http://jsfiddle.net/Vzq4B)
#permanent {
height: 100px;
margin-bottom: 15px;
width: 100%;
-webkit-animation: super-rainbow 5s infinite linear;
-moz-animation: super-rainbow 5s infinite linear;
}
#hover {
position: relative;
top: -115px;
margin-bottom: -100px;
height: 100px;
width: 100%;
background: #fff;
}
#hover:hover {
background-color: transparent;
}
However, this approach will only work if I know the height of my elements, which I don’t since the content is variable.
Which other ways are there to achieve this effect for divs of unknown height?
Try placing your DIVs inside parent containers which run the animation. Child containers can then hold content and have a white background, which turns transparent using CSS on hover.
HTML:
<div id="container">
<div id="child">Your content.</div>
</div>
CSS:
#container { animation: super-rainbow 5s infinite linear; }
#child {background-color: white;}
#child:hover {background-color: transparent;}
Here’s a Fiddle http://jsfiddle.net/bejnar/Vzq4B/4/
Why don't you try this:
#hover:hover {
height: auto;
width: 100%;
outline: 1px solid #999; /* only style */
-webkit-animation: super-rainbow 5s infinite linear;
-moz-animation: super-rainbow 5s infinite linear;
cursor: pointer;
}
There is a link: http://jsfiddle.net/nmL9s/
Thanks...
Related
I have an image of a butterfly, something like this.
I am trying to figure out if there is any way to make it look like its wings are opening and closing with a 3D CSS transform/translate or animation, but without having to split the image up into parts (it can be a background image of a div though if that helps).
Yes, using background applied to two elements where each one will show only one half and then you simply rotate both on the Y axis.
.box {
width:300px;
margin:20px;
display:flex;
perspective:500px;
}
.box::before,
.box::after{
content:"";
padding-top:56%; /* ratio based on your image */
flex:1; /* half the main element size */
background-image:url(https://i.imgur.com/DgMoHC5.jpg);
background-size:200% 100%; /* twice bigger than the pseudo element to get half the image*/
animation:left 1s linear infinite alternate;
transform-origin:right;
}
.box::after {
background-position:right; /* get the right part of the image */
animation-name:right;
transform-origin:left;
}
#keyframes left{
to {transform:rotateY(60deg)}
}
#keyframes right{
to {transform:rotateY(-60deg)}
}
<div class="box"></div>
A more realistic animation with some translation:
.box {
width: 300px;
margin: 20px;
display: flex;
perspective: 500px;
}
.box::before,
.box::after {
content: "";
padding-top: 56%;
flex: 1;
background-image: url(https://i.imgur.com/DgMoHC5.jpg);
background-size: 200% 100%;
animation: left 0.5s linear infinite alternate;
transform-origin: right;
}
.box::after {
background-position: right;
animation-name: right;
transform-origin: left;
}
#keyframes left {
from {
transform: translateZ(80px) rotateY(-30deg)
}
to {
transform:translateZ(0px) rotateY(50deg)
}
}
#keyframes right {
from {
transform: translateZ(80px) rotateY(30deg)
}
to {
transform:translateZ(0px) rotateY(-50deg)
}
}
<div class="box"></div>
I'm trying to use CSS variables as the background-color values. I got it to work in Chrome but not in Edge browser. I'm not sure if I did something wrong or it is a bug with the Edge browser.
In this example, the square change background-color from blue to red. But in Edge it's remains white.
:root {
--blue-color: blue;
--red-color: red;
}
#keyframes animatedBackground {
0% { background-color: var(--blue-color); }
100% { background-color: var(--red-color); }
}
#animate-area {
width: 100px;
height:100px;
animation: animatedBackground 1s linear infinite;
}
<div id="animate-area"></div>
Here is temporary work around if anyone needs it: If I use the CSS variable as the static background color, the animation will start to work. This feels totally random but it seems to solve the problem.
:root {
--blue-color: blue;
--red-color: red;
}
#keyframes animatedBackground {
0% { background-color: var(--blue-color); }
100% { background-color: var(--red-color); }
}
#animate-area {
width: 100px;
height:100px;
background-color: var(--blue-color); /* this fixed it! */
animation: animatedBackground 1s linear infinite;
}
<div id="animate-area"></div>
I'm working on a css animation to switch the background color of an element.
This animation is only two phases and no smooth transitions between both phases.
It means, the first 50% of the animation, the background color will be blue, and the last 50% of the animation, the background color will be grey, without an transition in between.
Here's the animation fully working:
div {
width: 200px;
height: 200px;
animation: bg 4s linear infinite;
}
#keyframes bg {
0% {
background: blue;
}
50% {
background: blue;
}
50.00001% {
background: grey;
}
100% {
background: grey;
}
}
<div></div>
I'm wondering if there's a simpler way to do that. What I'm looking for is to use only from and to inside the keyframes without any additional step.
You can achieve it using the animation-timing-function: steps(1) as given in below snippet. You can find more details about the animation-timing-function here and the generic steps value here in MDN.
div {
width: 200px;
height: 200px;
animation: bg 4s steps(1) infinite;
}
#keyframes bg {
0% {
background: blue;
}
50% {
background: grey;
}
}
<div></div>
Note: I have set the keyframe for grey color at 50% instead of 100% due to the problem discussed in this answer.
You can also use a short-cut notation :
div {
width: 200px;
height: 200px;
animation: bg 4s linear infinite;
}
#keyframes bg {
from, 50% {
background: blue;
}
50.00001%, to {
background: grey;
}
}
<div></div>
I was discussing with someone the ability for CSS3 to do animations upon click and hover and I decided to make a little test to show them. I decided to do a bit of boundary pushing and made it so that when you hovered over the animation happened, and when you un-hovered it waited 3 seconds and then ran the animation to put it back.
The problem however is that when the page loads, it runs the "un-hover" animation.
Any ideas for getting around this or another method that's better?
What the below code does is when you hover over the red box it animates is blue. When you un-hover is animates it back red again after 3 seconds. Both of them calculate to a 1 second animation time.
I know this could be fixed with one very simple line of JavaScript, but I'm only interested in seeing if there's a CSS answer.
#-webkit-keyframes makeblue {
0% {
background: red;
}
100% {
background: blue;
}
}
#keyframes makeblue {
0% {
background: red;
}
100% {
background: blue;
}
}
#-webkit-keyframes makered {
0% {
background: blue;
}
75% {
background: blue;
}
100% {
background: red;
}
}
#keyframes makered {
0% {
background: blue;
}
75% {
background: blue;
}
100% {
background: red;
}
}
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: makered 4s;
animation: makered 4s;
}
div:hover {
-webkit-animation: makeblue 1s;
animation: makeblue 1s;
background: blue;
}
<div></div>
EDIT 1
Does anyone know if this type of functionality exists, or even potentially planned for the future?:
#keyframes makeblue {
0% {
background: [CurrentValue];
}
100% {
background: blue;
}
}
Having this would be able to fix the problem. If this doesn't exist, I think it should :).
If you are dealing with background or simple css only (not a keyframe animation), you can have it with transition delay, check it out at jsfiddle!:
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
transition:background-color 0.25s 3s linear;
}
div:hover {
background-color:blue;
transition:background-color 0.25s linear;
}
I want a background image to exapand and then contract on hover.
a:hover{
background-size: 80%;
}
a:hover{
background-size: 85%;
transition: background-size 0.05s ease;
//This is where I want the size to shrink back to it's original size.
}
I know there is a delay-property, but is it possible to add multiple transitions with different delays etc?
One solution I came up with is to add an additional property
a.workaround:hover{
background-size: 80%;
transition-delay: 0.05s;
}
However this seems like a fairly messy solution. For example it doesn't support loops and it scales poorly.
You could instead define a CSS-Animation
See this jsFiddle for a demo: http://jsfiddle.net/qDppZ/
(Only -moz for clearness)
Code:
a {
display: inline-block;
background: url(http://openclipart.org/image/800px/svg_to_png/95329/green_button.png) no-repeat;
background-size: 80%;
width: 100px;
height: 60px;
}
a:hover {
-moz-animation: anim 0.2s; /* Firefox */
}
#-moz-keyframes anim /* Firefox */
{
0% { background-size: 80%;}
50% { background-size: 85%;}
100% { background-size: 80%;}
}