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
Related
This is auto fade out after hover css animation
I'm trying to show a notification on video play button. The button click actually clicked for video play. I want to show a div with its content with the play icon. However, I would like to fade out the play icon, lets say after 5 seconds . I would like to achieve it using CSS. Below is my attempt. Please inform me if better solution here.
Here is the live Demo
body {
font-size: 50%;
font-style: Arial;
}
.animation-box {
width: 75%;
height: 27.5rem;
background-color: blue;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.animation-container {
width: 1000rem;
height: 30rem;
}
.first-text {
font-size: 4rem;
position: absolute;
left: 2.5rem;
top: 5rem;
color: white;
-webkit-animation: fadeOut 2s forwards;
animation: fadeOut 2s forwards;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.first-text:hover {
-webkit-animation: fadeIn 0s forwards;
animation: fadeIn 0s forwards;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#-webkit-keyframes fadeOut {
from {opacity: 1;}
to {opacity: 0;}
}
#keyframes fadeOut {
from {opacity: 1;}
to {opacity: 0;}
}
<section class="animation-box">
<h1 class="first-text">This is auto fade out after hover </h1>
</section>
You can achieve this with just transition :
body {
font-size: 50%;
font-style: Arial;
}
.animation-box {
width: 75%;
height: 27.5rem;
background-color: blue;
margin: 0 auto;
overflow: hidden;
position: relative;
}
h1{
opacity:0;
transition: opacity 250ms 5s ease;
}
.animation-box:hover h1{
opacity:1;
transition-delay: 250ms;
}
<section class="animation-box">
<h1 class="first-text">This is auto fade ou1t after hover </h1>
</section>
.Class {
transition: all 0.5s;
color: #ff0;
margin: 50px;
font-size: 28px;
cursor: pointer;
}
.Class:hover {
color: #00f;
}
<p class="Class"> This is me </p>
Use transition:0.5s ease with opacity:0
<section class="animation-box">
<h1 class="first-text">This is auto fade ou1t after hover </h1>
</section>
.animation-box{
transition: 0.5s ease;
}
.animation-box:hover{
opacity:0;
transition: 0.5s ease;
}
Is it possible to comine css transform with some animation?
I have this tarnsform
transform: translate(-10%, 0px); left: 0px;
which works fine to animate slider left, right scrolling
but I would like to add some fade in animation from opacity 0 to 1
if i understand right, you want both translate and opacity to be included in an animation use this :
div {
width: 100px;
height: 100px;
background: red;
animation-name: fromleft;
animation-delay: 0s;
animation-duration: 0.8s;
animation-fill-mode: backwards;
animation-timing-function: ease-out;
}
#keyframes fromleft {
0% {
transform: translateX(-100px);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
<div>
</div>
Hi I have a situation where I need to show a word with a transition after some time inside a paragraph
for example i have an:
<h2>Click here to find <span class="more">more</span> information </h2>
I need the text more to appear with a sort of "fade" while the left and side text moves a bit to the sides kind of like this effect:
example
What i've tought (and was working) was using another span tag with class spacer right before the .more
<h2>Click here to find <span class="spacer"></span><span class="more">more</span> information </h2>
This is absolutely positioned and using a transition from width 0 to width 70px
and was looking fine in every browser except safari, because the spacer is always visible
here is my css code:
h2.sides-styled { left:0; margin: 0 auto; opacity:0; overflow: hidden; padding: 4px 0; position: absolute; right: 0; width: 774px; z-index: 1000; }
And the spans:
span.more { color:red; font-style: italic; left:365px; opacity:0; position: absolute; transition: visibility 2s; transition-delay: 3.3s; visibility: hidden; }
span.more.visible { opacity: 1; visibility: visible; }
span.spacer{ width:0; background: blue; -webkit-transition: width 2s ease; -moz-transition: width 0.3s ease; -o-transition: width 0.3s ease; -ms-transition: width 0.3s; transition: width 0.3s; transition-delay: 3.1s; -webkit-transition-delay: 3.1s; -moz-transition-delay: 3.1s; -o-transition-delay: 3.1s; -ms-transition-delay: 3.1s; }
Animation is triggered adding the class .visible in Javascript
I need to achieve this using only css
You can achieve the effect using CSS3 transitions:
function toggleVisible() {
var heading = document.getElementsByTagName('h2')[0];
heading.classList.toggle('visible');
}
var button = document.getElementsByTagName('button')[0];
button.addEventListener('click', toggleVisible, false);
h2 {
font-size: 36px;
text-align: center;
}
h2 span {
display: inline-block;
}
h2 span:nth-of-type(1) {
transform: translateX(42px);
transition: transform 2s ease-in-out;
}
h2 span:nth-of-type(2) {
opacity: 0;
transition: opacity 2s ease-in-out 1s;
}
h2 span:nth-of-type(3) {
transform: translateX(-42px);
transition: transform 2s ease-in-out;
}
h2.visible span:nth-of-type(1) {
transform: translateX(0);
}
h2.visible span:nth-of-type(2) {
opacity: 1;
}
h2.visible span:nth-of-type(3) {
transform: translateX(0);
}
<h2><span>Click here to find</span> <span>more</span> <span>information</span></h2>
<button type="button">Toggle visible</button>
You need to use keyframes for that. I've made a quick test: http://jsbin.com/pubicabiku/1 . You'll need to adjust duration and position, but you can get the gist.
More info about keyframes: http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
Update:
For smooth animation, you can use percentages. from and to represent 0 and 100:
/* sleft */
#-webkit-keyframes sleft {
0% {left: 50px; }
60% {left: 0px;}
100% {left: 50px;} // initial state
}
To repeat animation X times:
animation-iterantion-count: X;
-webkit-animation-iterantion-count: X;
Edit: I posted the code, just in case:
CSS
#swap {
position:absolute;
color:chocolate;
-webkit-animation: swap 2s infinite;
animation: swap 2s infinite;
}
/* swap */
#-webkit-keyframes swap {
from {left: 150px; opacity:0;}
to {left: 190px; opacity:1;}
}
#keyframes swap {
from {left: 150px; opacity:0;}
to {left: 190px; opacity:1;}
}
#sleft {
position:absolute;
-webkit-animation: sleft 2.5s infinite;
animation: sleft 2.5s infinite;
}
/* sleft */
#-webkit-keyframes sleft {
from {left: 50px; }
to {left: 0px;}
}
#keyframes sleft {
from {left: 50px;}
to {left: 0px;}
}
#sright {
position:absolute;
-webkit-animation: sright 3s infinite;
animation: sright 3s infinite;
}
/* sright */
#-webkit-keyframes sright {
from {left: 200px; }
to {left: 270px;}
}
#keyframes sright {
from {left: 200px; }
to {left: 270px;}
}
HTML
<p id="sentence">
<span id="sleft">We provide</span>
<span id="swap">code</span>
<span id="sright">for your business.</span>
</p>
I have a pulsating css3 effect on a div, and I'd like it to have a hover effect that seamlessly blends with the pulse, I have a near finished JFiddle here:
https://jsfiddle.net/jnz7yfg0/
It's nearly there, but it's jerky when you hover over it, any ideas to make the animation smoother?
Many thanks!
Code here:
.orb {
width: 20px;
height: 20px;
border-radius: 10px;
background: #2fa4e7;
cursor: pointer;
opacity: 1;
-webkit-transform: scale(1);
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#-webkit-keyframes pulsate {
0% { opacity: 1; }
50% { opacity: .4; -webkit-transform: scale(3); }
100% { opacity: 1; }
}
.orb {
-webkit-animation: pulsate 2s infinite;
}
.orb:hover {
width: 20px;
height: 20px;
border-radius: 10px;
background: #2fa4e7;
cursor: pointer;
opacity: 1;
-webkit-transition: all .2s ease-in-out;
-webkit-animation: pulsatehover 2s infinite;
}
#-webkit-keyframes pulsatehover {
0% { opacity: 1; }
50% { opacity: .4; -webkit-transform: scale(6); }
100% { opacity: 1; }
}
As far as I know, there is no way in CSS to chain or merge 2 animations.
You can however get the effect that you want changing the way it works
.container {
width: 80px;
height: 80px;
margin: 100px;
border: solid red 1px;
position: relative;
perspective: 800px;
transition: perspective 2s;
}
.container:hover {
perspective: 400px;
}
.obj {
position: absolute;
width: 100%;
height: 100%;
background: lightblue;
border-radius: 50%;
-webkit-animation: pulse 1s infinite alternate;
animation: pulse 1s infinite alternate;
}
#-webkit-keyframes pulse {
0% {transform: translateZ(0px)}
100% {transform: translateZ(200px)}
}
#keyframes pulse {
0% {transform: translateZ(0px)}
100% {transform: translateZ(200px)}
}
<div class="container">
<div class="obj">
</div>
</div>
The trick is to make the animation change the z position of the element.
Then , the zoom effect is achieved with the perspective property (in the parent).
A lower pespective makes the effect of the transform bigger. Notice that the animation is always the same, it's the visual effect that changes.
Also, the perspective is animatable, so you can make the transition smooth
I was thinking about making an animation where, for example, a circle is falling from the top of the screen/website to the bottom and then it starts to rotate without end. I have the idea but I don't know how to describe it in CSS.
This is what I have done so far and get stuck:
#circle {
border-radius: 50%;
border-top-color: red;
width: 200px;
height: 200px;
bottom: 0px;
#circle {
animation-name: falling;
animation-duration: 5s;
#keyframes falling {
0% {
bottom: 100%;
}
50% {
bottom:0%;
}
100% {
transform: rotate(360deg);
}
I have no idea how I can make an iteration in the "100%" step. Please give me some advice
Demo Fiddle
You can chain animations in CSS by listing their settings in sequence after the relevant CSS animation properties.
Crucially you want to set the animation order, and their respective durations:
animation: falling 1s, rotate 2s;
Then queue them to start sequentially:
animation-delay: 0s, 1s;
So..the above basically says that the falling animation will last 1 second, play it immediately... then play the rotating animation after 1 second (when falling has finished)
It is also important to specify only playing the falling animation once, but loop the rotation:
animation-iteration-count: 1, infinite;
Importantly, dont reset the falling animation state on completion...so the circle stays at the bottom of the page, for the rotation..keep it cyclical:
animation-fill-mode: forwards, both;
HTML
<div id='circle'></div>
CSS
#circle {
border-radius: 50%;
border: 4px solid red;
width: 20px;
height: 20px;
bottom: auto;
position:absolute;
animation: falling 1s, rotate 2s;
animation-delay: 0s, 1s;
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards, both;
-webkit-animation: falling 1s, rotate 2s;
-webkit-animation-delay: 0s, 1s;
-webkit-animation-iteration-count: 1, infinite;
-webkit-animation-fill-mode: forwards, both;
}
#keyframes falling {
0% {
bottom: 100%;
}
100% {
bottom:0%;
}
}
#keyframes rotate {
0% {
-webkit-transform: rotateX(0deg);
}
100% {
-webkit-transform: rotateX(360deg);
}
}
#-webkit-keyframes falling {
0% {
bottom: 100%;
}
100% {
bottom:0%;
}
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotateX(0deg);
}
100% {
-webkit-transform: rotateX(360deg);
}
}