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);
}
Related
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/
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.
I created a button. This button is defined by these CSS properties:
#button {
width: 50px;
height: 50px;
border: 3px solid #F1F2F0;
text-align:center;
background-color: #02BFC1;
display: table;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right:0;
-webkit-transition: all 0.5s ease;
cursor: pointer;
box-shadow: 0px 0px 30px rgba(0,0,0,0.4);
animation: blinker 2s ease infinite;
}
This button blinks using the animation blinker that smoothly changes the background-color from a darker to a lighter blue, defined like this:
#keyframes blinker {
50% { background-color: #03FCFF; }
}
It also has a hover animation:
#button:hover {
background-color: #F37C2B;
transform: scale(1.1);
box-shadow: 0px 0px 70px rgba(0,0,0,0.4);
animation-name: none;
}
My problem is this: the hover animation used to be completely smooth before I added the blinker animation. Now, it just instantly changes background-colorto the orange, while the transform: scale(1.1) still changes smoothly.
How can I make it so that hovering the button pauses the blinker animation and smoothly changes background-color, and that the animation resumes by mouse-leaving the button? If possible, I would like to use only CSS for this and no js.
If you prefer, you can modify this JSFiddle to respond.
EDIT: This doesn't work only on chrome, how can I make it so it does?
You have too many things going on in your CSS. As a general rule try to keep things as simple as possible if you want your code to be fast and efficient.
Here is your working code with some explanations:
button {
width: 50px;
height: 50px;
display: block;
border: 3px solid #F1F2F0;
background-color: #02BFC1;
margin: 30px auto;
cursor: pointer;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);
animation: 2s ease infinite blinker;
transition: background-color .5s ease, transform .5s ease, box-shadow .5s ease; /* it is best to select the properties you want to transition instead of using 'all' */
}
#keyframes blinker {
50% {
background-color: #03FCFF;
}
}
button:hover {
background-color: #F37C2B;
box-shadow: 0px 0px 70px rgba(0, 0, 0, 0.4);
animation: none;
transform: scale(1.1);
}
<button></button>
Don't forget to use the prefixes needed for your project.
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.
I am trying to implement the "fade out" effect in pure CSS. Here is the fiddle. I did look into a couple of solutions online, however, after reading the documentation online, I am trying to figure out why the slide animation would not work. Any pointers?
.dummy-wrap {
animation: slideup 2s;
-moz-animation: slideup 2s;
-webkit-animation: slideup 2s;
-o-animation: slideup 2s;
}
.success-wrap {
width: 75px;
min-height: 20px;
clear: both;
margin-top: 10px;
}
.successfully-saved {
color: #FFFFFF;
font-size: 20px;
padding: 15px 40px;
margin-bottom: 20px;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #00b953;
}
#keyframes slideup {
0% {top: 0px;}
75% {top: 0px;}
100% {top: -20px;}
}
#-moz-keyframes slideup {
0% {top: 0px;}
75% {top: 0px;}
100% {top: -20px;}
}
#-webkit-keyframes slideup {
0% {top: 0px;}
75% {top: 0px;}
100% {top: -20px;}
}
#-o-keyframes slideup {
0% {top: 0px;}
75% {top: 0px;}
100% {top: -20px;}
}
<div class="dummy-wrap">
<div class="success-wrap successfully-saved">Saved</div>
</div>
Here is another way to do the same.
fadeIn effect
.visible {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
fadeOut effect
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
UPDATE 1:
I found more up-to-date tutorial CSS3 Transition: fadeIn and fadeOut like effects to hide show elements and Tooltip Example: Show Hide Hint or Help Text using CSS3 Transition here with sample code.
UPDATE 2: (Added details requested by #big-money)
When showing the element (by switching to the visible class), we want the visibility:visible to kick in instantly, so it’s ok to transition only the opacity property. And when hiding the element (by switching to the hidden class), we want to delay the visibility:hidden declaration, so that we can see the fade-out transition first. We’re doing this by declaring a transition on the visibility property, with a 0s duration and a delay. You can see a detailed article here.
I know I am too late to answer but posting this answer to save others time.
You can use transitions instead:
.successfully-saved.hide-opacity{
opacity: 0;
}
.successfully-saved {
color: #FFFFFF;
text-align: center;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-ms-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
opacity: 1;
}
Since display is not one of the animatable CSS properties.
One display:none fadeOut animation replacement with pure CSS3 animations, just set width:0 and height:0 at last frame, and use animation-fill-mode: forwards to keep width:0 and height:0 properties.
#-webkit-keyframes fadeOut {
0% { opacity: 1;}
99% { opacity: 0.01;width: 100%; height: 100%;}
100% { opacity: 0;width: 0; height: 0;}
}
#keyframes fadeOut {
0% { opacity: 1;}
99% { opacity: 0.01;width: 100%; height: 100%;}
100% { opacity: 0;width: 0; height: 0;}
}
.display-none.on{
display: block;
-webkit-animation: fadeOut 1s;
animation: fadeOut 1s;
animation-fill-mode: forwards;
}
This is the working code for your question.
Enjoy Coding....
<html>
<head>
<style>
.animated {
background-color: green;
background-position: left top;
padding-top:95px;
margin-bottom:60px;
-webkit-animation-duration: 10s;animation-duration: 10s;
-webkit-animation-fill-mode: both;animation-fill-mode: both;
}
#-webkit-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
#keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
</style>
</head>
<body>
<div id="animated-example" class="animated fadeOut"></div>
</body>
</html>
You forgot to add a position property to the .dummy-wrap class, and the top/left/bottom/right values don't apply to statically positioned elements (the default)
http://jsfiddle.net/dYBD2/2/
.fadeOut{
background-color: rgba(255, 0, 0, 0.83);
border-radius: 8px;
box-shadow: silver 3px 3px 5px 0px;
border: 2px dashed yellow;
padding: 3px;
}
.fadeOut.end{
transition: all 1s ease-in-out;
background-color: rgba(255, 0, 0, 0.0);
box-shadow: none;
border: 0px dashed yellow;
border-radius: 0px;
}
demo here.
This may help :-
<!DOCTYPE html>
<html>
<head>
<style>
.cardiv{
height:200px;
width:100px;
background-color:red;
position:relative;
text-align:center;
overflow:hidden;
}
.moreinfo{
height:0%;
transition: height 0.5s;
opacity:1;
position: absolute;
bottom:0px;
background-color:blue;
}
.cardiv:hover .moreinfo{
opacity: 1;
height:100px;
}
</style>
</head>
<body>
<div class="cardiv">
<div class="moreinfo">Hello I am inside div</div>
</div>
</body>
</html>
Use the forwards fill-mode in CSS for it to remain on the last part of the animation.
I suggest using transform: tranlsateY(-20px); instead of using css positions, but if you insist of using it then set the .dummy-wrap position into absolute
.dummy-wrap {
animation: slideup 2s forwards;
-moz-animation: slideup 2s forwards;
-webkit-animation: slideup 2s forwards;
-o-animation: slideup 2s forwards;
position: absolute;
}
#keyframes slideup {
0% {
top: 0px;
}
75% {
top: 0px;
}
100% {
top: -20px;
}
}
<div class="dummy-wrap">
<div class="success-wrap successfully-saved">Saved</div>
</div>
You can remove element from the page via Position Absolute;
then:
transform: translateX(-200vw);
opacity: 0;
transition: opacity 0.2s;
transition-delay: 200ms;
then when you want element to appear, use this class:
opacity: 1;
transform: translateX(0px);
logic here is that: Transform -> removes/places element into the view INSTANTLY; while opacity takes care of the Fade In / Out effects
We also added slight delay with transiton-delay, to make it little bit better
NOTE: if you don't like TranslateX, you can replace it with scale(0); scale(1) -> to make element appear and disappear instantly