I have a div that I need to animate.
The animation starts with the div being 43px from the top of the viewport after which it moves downwards and then the div should stop at its natural position (top:auto) - the position where the div would normally be located.
I have styled the div as:
.page-slider {
position: absolute;
background-color: #FFFFFF;
display: block;
width: 100%;
-webkit-box-shadow: 0 -7px 7px -7px #333333;
-moz-box-shadow: 0 -7px 7px -7px #333333;
box-shadow: 0 -7px 7px -7px #333333;
animation: uncover 3s ease 0s 1 ;
-webkit-animation: uncover 3s ease 0s 1 ;
-moz-animation: uncover 3s ease 0s 1 ;
}
I have defined my animation as:
#keyframes uncover {
from {
top: 43px;
height: 1000px;
}
to {
top: auto;
height: 0;
}
}
#-webkit-keyframes uncover {
from {
top: 43px;
height: 1000px;
}
to {
top: auto;
height: 0;
}
}
The div is basically empty and thus the height is set to 1000px so that it blocks the contents behind it as it progresses towards the bottom.
Now, the issue is that with the above markup, the animation behaves weirdly. It starts at 43px as expected but then instead of moving down, it moves up (with the height of the div reducing with each second) and then the div comes to rest at its natural position.
If I change the top in the from section of the keyframe to 100% from auto, then it does the trick, but the div crosses its natural position all the way to the bottom of the viewport and then after 3 seconds comes back to its natural position.
How do I animate the div such that it starts at 43px from the top and then comes to rest at its natural position (top: auto)?
I think you can stop the animation at end by using : fill-mode.
it seems to be the same issu :
Can't stop animation at end of one cycle
best regards.
Try to use max-height instead height, may be max-height bigger than your box can help you.
Related
I have several animations on my site that I just realized do not even show up in Firefox or Internet Explorer. I have the background-image within the keyframes. I do this because I have different images in different percentages with the animation.
Why doesn't the background-image display within the keyframes in Firefox and Internet Explorer and is there a way to make this work?
As per the specs, background-image is not an animatable or a transitionable property. But it does not seem to say anything about what or how the handling should be when it is used as part of transition or animation. Because of this, each browser seem to be handling it differently. While Chrome (Webkit) is displaying the background image, Firefox and IE seem to do nothing.
The below quote found in an article at oli.jp provides some interesting information:
While CSS Backgrounds and Borders Module Level 3 Editor’s Draft says “Animatable: no” for background-image at the time of writing, support for crossfading images in CSS appeared in Chrome 19 Canary. Until widespread support arrives this can be faked via image sprites and background-position or opacity. To animate gradients they must be the same type.
On the face of it, it looks like Firefox and IE are handling it correctly while Chrome is not. But, it is not so simple. Firefox seems to contradict itself when it comes to how it handles transition on background image as opposed to animation. While transitioning background-image, it shows up the second image immediately (hover the first div in the snippet) whereas while animating, the second image doesn't get displayed at all (hover the second div in the snippet).
So, conclusion is that it is better to not set background-image inside keyframes. Instead, we have to use background-position or opacity like specified # oli.jp.
div {
background-image: url(https://placehold.it/100x100);
height: 100px;
width: 100px;
margin: 10px;
border: 1px solid;
}
div:nth-of-type(1) {
transition: background-image 1s ease;
}
div:nth-of-type(1):hover {
background-image: url(https://placehold.it/100/123456/ffffff);
}
div:nth-of-type(2):hover {
animation: show-img 1s ease forwards;
}
#keyframes show-img {
to {
background-image: url(https://placehold.it/100/123456/ffffff);
}
}
<div></div>
<div></div>
If you have multiple images that should be shown at different percentages within the keyframe then it would be a better idea to add all those images on the element at start and animate their position like in the below snippet. This works the same way in Firefox, Chrome and IE.
div {
background-image: url(https://placehold.it/100x100), url(https://placehold.it/100/123456/ffffff);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: 0px 0px, 100px 0px;
height: 100px;
width: 100px;
margin: 10px;
border: 1px solid;
}
div:hover {
animation: show-img 1s steps(1) forwards;
}
#keyframes show-img {
to {
background-position: -100px 0px, 0px 0px;
}
}
<div></div>
Or, like in the below snippet. Basically each image is the same size as the container as background-size is set as 100% 100% but only one image is shown at any given time because of them being the same size as container. Between 0% to 50% the first image is shown because it is at 0px,0px (left-top) whereas the second image is at 100px,0px (outside the right border). At 50.1%, the first image is at -100px,0px (outside left border) and second image is at 0px,0px and so it is visible.
div {
background-image: url(https://picsum.photos/id/0/367/267), url(https://picsum.photos/id/1/367/267);
background-size: 100% 100%; /* each image will be 100px x 100px */
background-repeat: no-repeat;
background-position: 0px 0px, 100px 0px;
height: 100px;
width: 100px;
margin: 10px;
border: 1px solid;
animation: show-img 5s ease forwards;
}
#keyframes show-img {
0%, 50%{
background-position: 0px 0px, 100px 0px; /* initially 1st image will be shown as it it as 0px 0px */
}
50.1%, 100% {
background-position: -100px 0px, 0px 0px; /* at 50.1% 2nd image will be shown as it it as 0px 0px */
}
}
<div></div>
I am inserting an overlay div with width 100%, but the overlay div is not rendered completely. For some reason, it looks as if it has moved rightward.
Here is fiddle. You can check that the padding on the right side does not show fully.
html
<div class='overlay'>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
css
.overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1000000;
background-color: rgba(255, 255, 255, 0.85);
-webkit-transition: opacity .2s linear;
transition: opacity .2s linear;
padding: 20px;
}
Paddings are not calculated in the width in HTML.
That's why when you set the width to 100% (relative to the window), the padding will go outside the window.
If you wish to fit the size, with the padding, you should not set any width property.
But, in your case, your string is a bunch of "A"s, which will affect the property listed above. In this case, you would need to set the width to 40px shorter than the window width. (Because the padding on the left and right are 20px respectively, 20 + 20 = 40)
document.getElementsByTagName("div")[0].style.width = window.innerWidth - 40 + "px";
Apart from that, if you want the "A"s to move to the next line, use this css property:
word-wrap: break-word;
Otherwise, use one of the following two css properties:
overflow: hidden;
white-space: nowrap;
Replace your CSS padding with below code,
.overlay {
padding : 20px 0px;
}
As you are using padding: 20px you need to reduce width and height by 40px, you can do that using calc(100% - 40px).
Also you need to add word-wrap: break-word to break long word in div.
.overlay {
position: fixed;
left: 0;
top: 0;
width: calc(100%-40px);
height: calc(100%-40px);
z-index: 1000000;
background-color: rgba(255, 255, 255, 0.85);
-webkit-transition: opacity .2s linear;
transition: opacity .2s linear;
padding: 20px;
word-wrap: break-word;
}
I have the following code:
.dangerous_b {
width: 636px;
height: 72px;
background-image: url('/media/anim.png');
float: left;
background-color: black;
animation: bganim 100ms steps(1, start) infinite;
}
#keyframes bganim {
from { background-position: 0px 0px; }
to { background-position: 0px -72px; }
}
But the animation is only playing once. What am I doing wrong?
EDIT: Note that the animation plays out once, so there is a visual difference. But I want the animation to loop.
Btw: Here is the picture I used: http://i.imgur.com/fA80qQc.png
2nd EDIT: Here is the code snippet
.dangerous_b {
width: 636px;
height: 72px;
background-image: url('http://i.imgur.com/fA80qQc.png');
float: left;
background-color: black;
animation: bganim 100ms steps(1, start) infinite;
}
#keyframes bganim {
from { background-position: 0px 0px; }
to { background-position: 0px -72px; }
}
<div class="dangerous_b"></div>
3rd EDIT: It's working now with the following code:
.dangerous_b {
width: 636px;
height: 72px;
background-image: url('http://i.imgur.com/fA80qQc.png');
float: left;
background-color: black;
animation: bganim 100ms steps(1, start) infinite;
}
#keyframes bganim {
50% { background-position: 0px -72px; }
}
Reason:
Problem is because of the animation-timing-function. A value of steps(1,start) means that the animation has only one step and it happens right at the start of the animation itself.
As per MDN (picked from definition for step-start but it is same as steps(1, start)):
Using this timing function, the animation jumps immediately to the end state and stay in that position until the end of the animation.
First step of the first iteration happens as soon as the page is loaded (or class is added) and due to it, the background image immediately moves to the position indicated inside the to frame. For the 2nd iteration, the move back to its original position (from frame) and then to the final position (to frame) again happens instantaneously meaning that you don't get to see any visual difference and it looks as though the element is staying at its place without any animation.
.dangerous_b {
width: 636px;
height: 72px;
background-image: url('http://i.imgur.com/fA80qQc.png');
float: left;
background-color: black;
animation: bganim 1s steps(1, start) infinite;
}
#keyframes bganim {
from {
background-position: 0px 0px;
}
to {
background-position: 0px -72px;
}
}
<div class='dangerous_b'></div>
The same behavior can be seen in this fiddle also. This is not my creation but is an adaptation of the demo present as designmodo. The first car never actually moves (or is never actually seen to move) because the step happens right at the start.
Solution 1: Use two steps and double the ending background position
When the no. of steps is set to two, the animation happens as a two step process where the first step again happens at the start of the animation (because of start parameter). This means:
During the first step, the background moves to half distance between the start and the end state.
Since 1st step happens right at the start, background-position is never 0px 0px. (Do note that, I have doubled the end background-position).
In the 2nd step, the background moves to the final position. Because the background images are repeated, 0px -144px is equal to 0px 0px. This creates an illusion of the background moving to its original position.
.dangerous_b {
width: 636px;
height: 72px;
background-image: url('http://i.imgur.com/fA80qQc.png');
float: left;
background-color: black;
animation: bganim 1s steps(2, start) infinite;
}
#keyframes bganim {
from {
background-position: 0px 0px;
}
to {
background-position: 0px -144px;
}
}
<div class='dangerous_b'></div>
Solution 2: Use just one step but change the end position to half way
For some reason, this seems to mimic a two step animation.
In the first half, the background moves to the position indicated within 50% frame.
During second half, it seems to go back to the original position (or 100% position, both of which are the same). Thus when next iteration starts and the image jumps, it moves from 0% or 100% position to 50% position and ends up producing the required animation effect.
.dangerous_b {
width: 636px;
height: 72px;
background-image: url('http://i.imgur.com/fA80qQc.png');
float: left;
background-color: black;
animation: bganim 1s steps(1, start) infinite;
}
#keyframes bganim {
0% {
background-position: 0px 0px;
}
50% {
background-position: 0px -72px;
}
100% {
background-position: 0px 0px;
}
}
<div class='dangerous_b'></div>
If I understand it correctly, it now takes 1 frame to run your animation.
Since your background image is moving out of sight, you won't see it.
https://developer.mozilla.org/nl/docs/Web/CSS/timing-function#The_steps()_class_of_timing-functions
I want to make a circle, where you can hover over it and then it change from picture 1 to 2. I can do that, but when the transition is finished it goes back to the .circle class, instead of staying at second picture.
So is there anyway to make it stay at second picture, as long as im still having my mouse over the picture.
Is there also a way to make it change from second to first picture, when i remove my mouse from it ?
.circle{
width: 250px;
height: 250px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #333333;
box-shadow: 10px 10px rgba(0,0,0,0.4);
-moz-box-shadow: 10px 10px rgba(0,0,0,0.4);
-webkit-box-shadow: 10px 10px rgba(0,0,0,0.4);
-o-box-shadow: 10px 10px rgba(0,0,0,0.4);}
}
.circle-:hover{
-webkit-animation: second 2s; /* Chrome, Safari, Opera */
animation: second 2s;
}
#-webkit-keyframes second {
from {background: url("../images/circle-picture1");}
to {background: url("../images/circle-picture2");}
}
Add animation-fill-mode: forwards; and its prefixed variants to your .circle:hover class.
This causes the target to "retain the computed values set by the last keyframe encountered during execution."
More info on MDN
So i have my image on my webpage. In my css code, i have a transition for a :hover (glow appears), which works fine, and i want to add a stroke on :active. Here's my code :
#bb
{
top: 55%;
left: 6%;
opacity: 0.85;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#bb:hover
{
opacity: 1;
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.75);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.75);
box-shadow: 0px 0px 20px rgba(255,255,255,0.75);
}
#bb:active
{
opacity: 1;
border: 10px solid rgba(87,87,87,0.8);
}
my problems are the following : how do i get the stroke to appear around the image without moving it, and how do i get it to stay "active" without having to hold the click on the image?
You can use CSS box-sizing:border-box;. Write like this:
#bb:active
{
opacity: 1;
border: 10px solid rgba(87,87,87,0.8);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
Check this http://jsfiddle.net/4g6d9/
A border occupies space, so adding a border normally displaces an element. If you use the outline property instead of border, no displacement takes place—but the outline will appear on top of anything that would otherwise appear in the same place, i.e. may cover other content.
The meaning of :active has various interpretations in different browsers. To make specific things happen (as cross-browser as possible) on keyboard or mouse events, you need to use JavaScript.