I am trying to recreate the following effect (click one of the colours on this page to see what I mean: http://flatuicolors.com) on an overlay when a link is clicked.
The transition is something like this: An overlay with a success message scales out and fades in, pauses and then scales out and fades out.
However, it is not producing the desired effect. What's more, the scaling is not visible at all. Any help is much appreciated.
html, body { height: 100%; }
.container {
position: relative;
margin: 0 auto; }
.container.questionnaire {
background:#f1c40f;
width: 100%;
max-width: 100%;
height: 100%;
}
.row-flex.buttons-only {
height:100%;}
.row-flex {
display: table;
width: 100%; }
.column {
box-sizing: border-box; }
.one-third-flex.column {
width: 33.3333%;
display: table-cell;
text-align: center;
vertical-align: middle;
float: none; }
.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: table;
background-color:#1abc9c;
z-index: 10;
}
h1.success-message { display: table-cell; text-align: center;
vertical-align: middle;}
.animated {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
#-webkit-keyframes fadeOut {
0% {visibility:visible; opacity: 1;transform: scale(2);}
40% {opacity: 1;transform: scale(1.5);}
60% {opacity: 1;transform: scale(1.5);}
100% {visibility:hidden; opacity: 0;transform: scale(1);}
}
#keyframes fadeOut {
0% {visibility:visible; opacity: 1; transform: scale(2);}
40% {opacity: 1;transform: scale(1.5);}
60% {opacity: 1;transform: scale(1.5);}
100% {visibility:hidden;opacity: 0; transform: scale(1);}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
<body>
<div class="overlay animated fadeOut"><h1 class="success-message">Success</h1></div>
<div class="container questionnaire">
<div class="row row-flex buttons-only">
<div class="one-third-flex column"></div>
<div class="one-third-flex column" style="background-color: #f4f4f4;">
<div role="button" class="ico-btn btn-settings-lg">CLICK
</div>
</div>
<div class="one-third-flex column"></div>
</div>
</div>
</body>
Well, I hope this answer may help you.
As I thought that was an interesting effect (created with flash), I have worked a bit creating it from scratch with css3 and jquery. It was easier for me to do my code insteed of trying to modify yours so that’s why It maybe not be usefull for You but maybe it may be for other users.
The html is simple:
<div class="square ">
</div>
<div class="effect ">
<div class="text">TEXT HERE</div>
</div>
Where square is the area to click and effect is the container of the animation, which is a div with 0 height and width placed at the center of the window in case you want to add more animations (as to make it “grow” or shrink).
With, also, some simple jquery:
$('. square).click(function () {
$('. effect).addClass("animation");
$('.text').addClass("text-effect");
setTimeout(function () {
$('. effect).removeClass("animation");
$('.text').removeClass("text-effect");
}, 1500);
});
to add a class to effect and text on click and remove it after animation is done
Then after some basic CSS styles I made the animation for effect:
.animation {
animation-name: background;
animation-duration: 1.5s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: 1;
}
#keyframes background {
0% {height:100%; width:100%; opacity:1}
80% {height:100%; width:100%; opacity:1}
99.999% {height:100%; width:100%; opacity:0}
100% {height:0; width:0; opacity:0}
}
And for the text I have just used a transition:
.text {
background-color:rgba(255,255,255,0.6);
width:100%;
text-align:center;
font-size:50px;
color:#fff;
font-weignt:bold;
text-shadow: 1px 1px 0 #000000;
font-family:arial;
padding:20px 0;
transition:all 0.2s linear;
position:absolute;
top:50%;
transform: translateY(-50%);
transition:all 0.2s linear;
}
.text-effect {
padding:10px 0;
font-size:40px;
}
All toguether and adding 8 squares with different colors:
JSFIDDLE
and, as I wrote above, the background fading and shrinking just with
#keyframes background {
0% {height:100%; width:100%; opacity:1}
80% {height:100%; width:100%; opacity:1}
100% {height:0; width:0; opacity:0}
}
JSFIDDLE2
Related
Imagine i have 3 div :
<div class="one animated">
I'm the first div
</div>
<div class="two">
second div
</div>
<div class="three">
Last one
</div>
I have a code to move the first to the top :
.animated {
animation: animation 2s;
animation-fill-mode: forwards;
}
#keyframes animation {
0% { top: 0; opacity: 1 }
100% { top: -300px; opacity: 0 }
}
I don't understand why the first div move to top, but not the others.
The first one disappear so i want to replace the blank by my others div ...
Something like that :
function test() {
document.getElementById("sample").classList.add("animated");
}
.one {
border: 1px solid red;
}
.animated {
animation: animation 2s;
animation-fill-mode: forwards;
}
#keyframes animation {
0% { top: 0; opacity: 1 }
100% { top: -300px; opacity: 0 }
}
<div class="one" id="sample">
I'm the first div
</div>
<div class="two">
second div
</div>
<div class="three">
Last one
</div>
<button onclick="test()">Test</button>
Use absolute:position; on Keyframes. This will make sure as soon as the div is hidden it automatically moves to the top.
Also you can add additional keyframes attributes to make if smooth.
function test() {
document.getElementById("sample").classList.add("animated");
}
.one {
border: 1px solid red;
}
.animated {
animation: animation 2s;
animation-fill-mode: forwards;
}
#keyframes animation {
0% {
top: 0;
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
position: absolute;
}
}
<div class="one" id="sample">
I'm the first div
</div>
<div class="two">
second div
</div>
<div class="three">
Last one
</div>
<button onclick="test()">Test</button>
Add position: absolute; to .animated class in your css
function test() {
document.getElementById("sample").classList.add("animated");
}
.one {
border: 1px solid red;
}
.animated {
animation: animation 2s;
animation-fill-mode: forwards;
position: absolute; // Adding this will help
transition: all 2s linear;
}
#keyframes animation {
0% { top: 0; opacity: 1; }
50% {top: -1; opacity: 0.5;}
100% { top: -300px; opacity: 0; }
}
<div class="one" id="sample">
I'm the first div
</div>
<div class="two">
second div
</div>
<div class="three">
Last one
</div>
<button onclick="test()">Test</button>
This question already has an answer here:
left-right movement.. css only very generic
(1 answer)
Closed 4 years ago.
I have the following HTML:
.container {
width: auto;
height: 32px;
background-color: gray;
display: inline-block;
padding: 4px 8px;
min-width: 400px;
position: absolute;
}
.box {
padding: 0 6px;
height: 100%;
left: 0;
background-color: red;
width: auto;
display: inline-block;
line-height: 32px;
}
<div class="container">
<div class="box">HELLO</div>
</div>
I want to animate the div from right to left in only CSS. The issue is that the inner box has a variant width (due to translations).
If I could do an animation similar to
from {
right: 0;
}
to {
left: 0;
}
it would be exactly what I need, but unfortunately this doesn't work.
How can I animate the inner div with a variant width from left to right using only CSS. The outer div also has a variant width.
Edit:
I would like the inner div to never move outside the outer div.
This is not a duplicate because the inner AND outer container have a variant/unknown width.
You can do this by starting with right:100% and finish to right:0%
EDIT
I've achieve this by using 2 different methods :
by changing the right property and with using a calc() to prevent to box to go outside your container
Use a wrapper who have the width of your container minus the width of your box and use translateX property for your animation.
.container{
background-color:#ccc;
width:400px;
position:relative;
height:50px;
}
.big{
width:600px;
}
.test1 .box{
position:absolute;
width:100px;
height:100%;
right:calc(100% - 100px);
background-color:red;
animation:to-right-1 1s linear forwards;
}
.test2 .wrapper{
position:relative;
width:calc(100% - 100px);
height:100%;
animation:to-right-2 1s linear forwards;
}
.test2 .box{
width:100px;
height:100%;
background-color:red;
}
#keyframes to-right-1{
from{
right:calc(100% - 100px);;
}
to{
right:0px;
}
}
#keyframes to-right-2{
from{
transform:translateX(0%);
}
to{
transform:translateX(100%);
}
}
<div class="test1">
<div class="container">
<div class="box">Hello</div>
</div>
<div class="container big">
<div class="box">Hello</div>
</div>
</div>
<div class="test2">
<div class="container">
<div class="wrapper"><div class="box">Hello</div></div>
</div>
<div class="container big">
<div class="wrapper"><div class="box">Hello</div></div>
</div>
</div>
After you define left and right in class.
transition-property: right, left;
transition-duration: 2s;
-webkit-transition-property: right, left; /* Safari */
-webkit-transition-duration: 2s;
right can be done like
right:calc(100% - 400px)
and use this to make it bigger as you go.
#-webkit-keyframes big {
from { -webkit-transform: scale(.1,.1); }
to { -webkit-transform: scale(1,1); }
}
#keyframes big {
from { transform: scale(.1,.1); }
to { transform: scale(1,1); }
Use this fiddle as reference http://jsfiddle.net/MiKr13/aL7t2jvr/
}
You can use keyframes animation to animate'em.
.container {
width: auto;
height: 32px;
background-color: gray;
display: inline-block;
padding: 4px 8px;
min-width: 400px;
position: absolute;
}
.box {
padding: 0 6px;
height: 100%;
left: 0;
background-color: red;
width: 50px;
display: inline-block;
line-height: 32px;
}
.navr{position:absolute; z-index:55; text-align:center; margin:0 auto; bottom:0%; cursor:pointer;}
.navr {
-webkit-animation-name: bump;
-webkit-animation-duration: 0.3s;
-webkit-animation-iteration-count: 1;
animation-name: bump;
animation-duration: 2s;
animation-iteration-count: 1;
position:absolute;
left:0;
}
#keyframes bump {
0% {right:-100%;}
100% {right:85%;}
}
<div class="container">
<div class="box navr">HELLO</div>
</div>
If you use variant width you can use the element's width to position them.
Here the class .animated has a width of 50px; so we can move it's postion from left:100% to left:50px instead of giving left:0
because the element .animate has the absolute position. That's why we are giving it's width as position here.
.container {
position: relative;
width: 80%;
height: 50px;
border: 1px solid black;
}
.animated {
position: absolute;
width: 50px;
height: 100%;
background-color: red;
animation: .5s linear 0s slide 1;
}
#keyframes slide {
from { left: 100%; }
to {
left: 50px;
transform: translateX(-100%);
}
}
<div class=container>
<div class=animated>hello
</div></div>
I'm trying to make a css class and animation which will make a div (and it's contents) fade out or move, but ultimately, the div to have display:none and visibility:hidden
My effort is not working! I can get it to either animate, or to appear to be "removed"
This crude example demonstrates the issue
.hide {
animation-name:fadeOut;
animation-duration:1s;
/*visibility: hidden;
display: none;*/
}
#keyframes fadeOut {
from {
opacity: 1;
margin-left: 0%;
}
to {
opacity: 0;
margin-left: -100%;
}
}
<div class="hide">
<div style="padding:20px;background:orange;">
<div style="padding:5px;background:azure;">
My content
</div>
</div>
</div>
I also tried updating the CSS to
to {
opacity: 0;
margin-left: -100%;
visibility: hidden;
display: none;
}
And also on https://jsfiddle.net/
As you can see, in the CSS I have commented out the hiding part (although the opacity makes it hidden).
Is it possible to apply the fadeout and then update the visibility and display without using JavaScript?
Add animation-fill-mode: forwards; so that the element you're animating stays on the last (key)frame, and it doesn't start over or refresh to the beginning.
Learn more about animation-fill-mode.
Another way to write this animation:
.hide {
animation: fadeOut 1s forwards;
}
.hide {
animation-name:fadeOut;
animation-duration:1s;
animation-fill-mode: forwards; /* added */
/*visibility: hidden;
display: none;*/
}
#keyframes fadeOut {
from {
opacity: 1;
margin-left: 0%;
}
to {
opacity: 0;
margin-left: -100%;
height: 0; /* added */
}
}
<div class="hide">
<div style="padding:20px;background:orange;">
<div style="padding:5px;background:azure;">
My content
</div>
</div>
</div>
<div>
Other content
</div>
Scrollbar fix
A possible solution to the scrollbar issue is to bring the hidden element back to the initial position with margin: 0; (or whatever the initial margin was):
#keyframes fadeOut {
0% {
opacity: 1;
margin-left: 0%;
}
99% {
opacity: 0;
margin-left: -100%;
height: 0;
}
100% {
opacity: 0;
margin-left: 0; /* added */
height: 0;
}
}
I am trying to make css3 spinner (loader). It works fine without .
But when I use , the css code is not loading.
See demo-
without doctype --> http://echakri.net/css-animation/witouthdoctype.html (work fine)
with doctype--> http://echakri.net/css-animation/withdotype.html (not work)
My code:
Html:
<div id="loaderw" class="loaderw">
<div class="loader1"></div>
<div class="loader2"></div>
<div class="loader3"></div>
<div class="loader4"></div>
<div class="loader5"></div>
</div>
Css:
.Loaderw {
width: 50px;
height: 40px;
text-align: center;
font-size: 10px;
float: right;
}
.Loaderw > div {
background-color: green;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.Loaderw .loader2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.Loaderw .loader3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.Loaderw .loader4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.Loaderw .loader5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
#-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
#keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
<div id="loaderw" class="loaderw">
<div class="loader1"></div>
<div class="loader2"></div>
<div class="loader3"></div>
<div class="loader4"></div>
<div class="loader5"></div>
</div>
How I solve this problem?
Thanks in advance.
The HTML and CSS between the sites is different. In the page with the doctype, change the #loaderw class from lower-case to upper-case to match your CSS.
<div id="loaderw" class="loaderw">
to
<div id="loaderw" class="Loaderw">
Alternatively, you can change all of the .Loaderw classes in your CSS to .loaderw - whatever's easier. But CSS is case-sensitive, so those need to match somehow.
what I mean in the title is, no matter which container is on top (is visible) in the fade-style animation, the href in the "onclick" is always the same.
here is the html
<div id="teaserslider">
<ul>
<li>
<section id="container_1">
<div class="head gradient-top loading" onclick="document.location.href='container1_detail.html'">
<div>
<!-- Content -->
</div>
</div>
</section>
</li>
<li class="animation">
<section id="container_2">
<div class="head gradient-top loading" onclick="document.location.href='container2_detail.html'">
<div>
<!-- Content -->
</div>
</div>
</section>
</li>
</ul>
</div>
here is the css
#teaserslider{
height: 100px;
margin-bottom: 6px;
}
#teaserslider li {
position: absolute;
list-style: none;
-webkit-transition: opacity 1s ease-in-out;
}
#-webkit-keyframes fadeout{
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#teaserslider li.animation {
-webkit-animation-name: fadeout;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 5s;
-webkit-animation-direction: alternate;
-webkit-transform: translateZ(0);//hardware acceleration
}
you may have noticed, I only use the webkit engine because this code runs inside a Phonegap Application for iOS.
No matter which container is showed currently, when I click the container I always get to "container2_detail.html". Anyone know how to solve this? thanks.
May be you have to define z-index to it. Write like this:
#-webkit-keyframes fadeout{
0% {
opacity:1;
z-index:1;
}
45% {
opacity:1;
z-index:1;
}
55% {
opacity:0;
z-index:-1;
}
100% {
opacity:0;
z-index:-1;
}
}
I tried this and it seems to work
#-webkit-keyframes fadeout{
0% {
opacity:1;
z-index: 1;
display: block;
}
45% {
z-index: 1;
display: block;
opacity:1;
}
55% {
z-index: -1;
display: none;
opacity:0;
}
100% {
z-index: -1;
display: none;
opacity:0;
}
}