I have a series of div that can have their own padding values. Some of them have in addition the following "autoClose" class to make them totally disappear (not only hidden but shrinked to 0px)
.autoClose {
animation: shrinkDiv 5s forwards;
animation-timing-function: linear;
animation-delay: 3s;
}
#keyframes shrinkDiv {
from {opacity: 1; height: auto; padding: 20px 10px 20px 40px;}
to {opacity: 0; height: 0px; padding: 0px 0px 0px 0px;}
}
Is it possible to have 20px 10px 20px 40px padding value (as example in the 'from' line) depending on the actual padding value of the concerned div without using javascript ?
Exclude the "from" attribute from your animation. It should take the padding of the div automatically. Code example;
.autoClose {
animation: shrinkDiv 5s forwards;
animation-timing-function: linear;
animation-delay: 3s;
}
#keyframes shrinkDiv {
to {opacity: 0; height: 0px; padding: 0px 0px 0px 0px;}
}
https://jsfiddle.net/dqup2bvL/7/
Related
I have following CSS for animating two separate elements:
.loading-icon,
.loading-icon-2{
height: 50px;
position: relative;
left: 50%;
top: 30%;
transform: translateXY(-50%, 50%);
}
.loading-icon {
display: flex;
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 60px;
height: 60px;
text-align: center;
animation-name: spin;
animation-duration: 2s;
transition-timing-function: linear;
animation-iteration-count: infinite;
animation: spin 2s linear infinite;
}
.loading-icon-2 {
display: flex;
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 60px;
height: 60px;
text-align: center;
animation-name: anotherspin;
animation-duration: 2s;
transition-timing-function: linear;
animation-iteration-count: infinite;
}
.loading-icon div,
.loading-icon-2 div {
margin: auto;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#keyframes anotherspin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
The only difference is that for the loading-icon-2 class all the animation properties have been specified separately instead of using the shorthand style.
But both the elements are behaving differently. Could someone please help understand why this is happening or am I missing something here.
See the code working here at CodePen.
The difference is that you're using transition-timing-function: linear instead of animation-timing-function: linear. When you use the shorthand, though, it implicitly employs the correct property name, making the animation look continuous with no easing.
Please see: https://codepen.io/se7en/pen/QmLWNK
In MS Edge 16 adding a css drop shadow to an icon using something like filter: drop-shadow(0px 0px 2px red); causes the css animation to be shaky.
This doesn't seem to happen in any other browser.
CSS:
.icon {
width: 24px;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: 12px 12px 0;
animation-duration: 4s;
animation-name: rotate;
filter: drop-shadow(0px 0px 2px red);
}
#keyframes rotate{
0%{
transform:rotate(0deg)
}
to
{
transform:rotate(360deg)
}
}
I'm trying to learn a bit about css animations, and decided to try making a book with page turns (fixed animations not draggable)
I got the animations working well enough and now I'd like to stack pages on top of each other to form a book. From what I can tell when the page flips, the outer div still occupies the original space, blocking my click event on the underlying page.
How can I get around this?
Here's a plunk demonstrating my issue http://plnkr.co/edit/2fPMgUvEKhdJLxJOOeBg
and the relevant CSS
.flipPage {
animation: flip-page 1s 0s 1 linear alternate;
animation-fill-mode: forwards;
}
.flipPageBack {
animation: flip-page-back 1s 0s 1 linear alternate;
animation-fill-mode: forwards;
}
.flipper {
width:200px;
height:200px;
transform-origin: right;
transform-style: preserve-3D;
}
.flipper > .front, .back {
position:absolute;
width: inherit;
height: inherit;
backface-visibility: hidden;
}
.flipper > .front {
z-index: 2;
background-color:coral;
box-shadow: inset -10px 0px 10px 0px rgba(0,0,0,0.25);
}
.flipper > .back {
background-color:lightcoral;
transform: rotatey(180deg);
box-shadow: inset 10px 0px 10px 0px rgba(0,0,0,0.25);
}
Ive read up quite a bit on this, but been struggling to get my head around it. I can find plenty of ways of animating the properties of a div on :hover, but I cant find anyway of just having properties animate without any user interaction.
Can someone show me how to get a div to pulsate, that is, animate the box-shadow property.
Something like
box-shadow: 0px 0px 10px #F00;
to
box-shadow: 0px 0px 20px #00F;
Many thanks.
You can do this via keyframes:
div{
height: 100px;
-moz-animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
-moz-animation-name: changeShadow;
-webkit-animation-name: changeShadow;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;
border: 1px solid black;
}
#-webkit-keyframes changeShadow{
from {
box-shadow: 0px 0px 10px #F00;
}
to {
box-shadow: 0px 0px 20px #00F;
}
}
#-moz-keyframes changeShadow{
from {
box-shadow: 0px 0px 10px #F00;
}
to {
box-shadow: 0px 0px 20px #00F;
}
}
Here is a fiddle: http://jsfiddle.net/dc4f2/
I'm trying to created a continuous wobble animation on a div id, and its not working for me. Any help would be greatly appreciated.
This is my code:
.figure {
display: inline-block;
width: 200px;
height: 200px;
background: rgb(23, 147, 219);
padding: 40px;
box-shadow: inset -5px -15px rgba(0, 0, 0, .06);
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 50%;
animation: wobble 5s ease-in-out infinite;
transform-origin: center bottom;
transition: padding .3s, bottom .3s;
text-align: center;
}
#keyframes wobble {
33% {
transform: rotate(5deg);
}
66% {
transform: rotate(-5deg);
}
}
<div class="figure" ></div>
Actually it is working , but since it is a sphere you can't notice it rotating , remove border-radius to see it. Also use alternate to see better effect
animation:wobble 5s ease-in-out infinite alternate;
also use 0% to 100% animation for better result.