I have a delayed animation on page load with CSS3. Everything works fine, but after the animation is done, the DIV goes back into visibility: hidden.
.content-left {
margin-left: 100px;
margin-top: 32px;
position: absolute;
z-index: 1;
visibility: hidden;
-webkit-animation: fadein 1s 2s ease; /* Safari and Chrome */
animation: fadein 1s 2s ease;
}
#keyframes fadein {
from { height: 0px; }
to { height: 421px; visibility: visible;} }
#-webkit-keyframes fadein {
from { height: 0px; }
to { height: 421px; visibility: visible;}}
That happens because once the animation is done, it reverts back to the original styling.
you can however, direct your animation to keep the last frame of the animation after its done playing, its called Animation Fill Mode
animation-fill-mode: forwards; - will keep the last frame of the animation.
animation-fill-mode: backwards; - will keep the first frame of the animation.
or you can add forwards to your animation declaration:
-webkit-animation: fadein 1s 2s ease forwards; /* Safari and Chrome */
animation: fadein 1s 2s ease forwards;
set animation-fill-mode: forwards so it will not go back to first stage of the animation.
Related
I am using a CSS animation to get my logo to slide in from off screen. What i'm looking for is the animation gets started with 3s delay right after the page gets loaded but the logo must be hidden at first and then suddenly it comes down slowly from the top of the page after 3s of loading it with the specified animation. what I have here is that you can see the logo when you load the page at the beginning and then after 3s the animation starts working. no one should see the logo at first. it must get appeared after 3s of loading the page. does anybody know what i'm missing here?
This is my CSS:
#logo-header {
height: 240px;
margin: 0 auto;
animation: var(--logo-header-time) ease-in-out 3s 1 logo-header;
}
body {
font-family: WeHaveSomeFontsHere;
--nav-load-time: 350ms;
--names-header-time: 2s;
--logo-header-time: 1s;
}
#keyframes logo-header {
0% {
transform: translateY(-100%);
display: none;
}
100% {
transform: translateY(0);
}
}
In order to get your logo to be hidden until the animation happens, you need the line of code animation-fill-mode: backwards; in your #logo-header
#logo-header {
height: 240px;
margin: 0 auto;
animation: var(--logo-header-time) ease-in-out 3s 1 logo-header;
animation-fill-mode: backwards;
}
body {
font-family: WeHaveSomeFontsHere;
--nav-load-time: 350ms;
--names-header-time: 2s;
--logo-header-time: 1s;
}
#keyframes logo-header {
0% {
transform: translateY(-100%);
display: none;
}
100% {
transform: translateY(0);
}
}
I have a logo of an iceberg, which I am trying to simulate a floating animation with by increasing and decreasing the top margin. I am using the following css for this:
img {
height: 60px;
padding: 5px;
-webkit-animation: logofloat 1s ease-in-out infinite alternate;
-moz-animation: logofloat 1s ease-in-out infinite alternate;
animation: logofloat 1s ease-in-out infinite alternate;
}
#keyframes logofloat {
from {
margin-top: 0px; margin-top: 5px;
}
to {
margin-top: 5px; margin-top: 10px;
}
}
Here is what that currently looks like: https://gyazo.com/bbd8991a3e9a42148bb7677b85d0db3d
The animation is a bit choppy, is there anything that I can do to make it smoother?
Use transform: translateY instead of margin, so the animation will take benefit of the GPU and use will-change: transform so the browser knows in advance what properties are going to change.
img {
height: 100px;
will-change: transform;
animation: logofloat 1s ease-in-out infinite alternate;
}
#keyframes logofloat {
from {
transform: translateY(0);
}
to {
transform: translateY(10px);
}
}
<img src="https://i.stack.imgur.com/UJ3pb.jpg" />
Finally, vendor prefixes are no longer necessary unless you need to support really old browser versions.
I using a vertical sprite sheet in an animation with #keyframe.
I just can't get it to work correctly.
body{
background: brown;
}
.hi {
width: 117px;
height: 180px;
background-image: url("http://i.imgur.com/DxApxaV.png");
-webkit-animation: play .9s steps(8) infinite;
-moz-animation: play .9s steps(8) infinite;
-ms-animation: play .9s steps(8) infinite;
-o-animation: play .9s steps(8) infinite;
animation: play .9s steps(8) infinite;
}
#keyframes play {
from { background-position:0px; }
to { background-position:0px 1080px; }
}
<div class="hi"></div>
I tried using #keyframe with background-position-y axis to no avail.
It should be animation at 1 frame.
You just needed to change the steps to 6.
Basically speaking, steps is the number of sprites you are wanting to show over X time. So in this case, you only have 6, not 9.
I also changed it to use background-position.y.. note that having background-position: 0 0; is also good practice for when you come across more complex, grid sprite sheets.
body{
background: brown;
}
.hi {
width: 117px;
height: 180px;
background-image: url("http://i.imgur.com/DxApxaV.png");
background-position: 0 0;
-webkit-animation: play .9s steps(6) infinite;
-moz-animation: play .9s steps(6) infinite;
-ms-animation: play .9s steps(6) infinite;
-o-animation: play .9s steps(6) infinite;
animation: play .9s steps(6) infinite;
}
#keyframes play {
from { background-position-y:0px; }
to { background-position-y:1080px; }
}
<div class="hi"></div>
I was wondering if there is a way to hide/expand the text by clicking the banner itself, as this would streamline the aesthetics even further, without the usage of any crutches. Preferably, I would like for a solution or a pointer without the involvement of Javascript.
Here is my jsfiddle of what I have done so far:
http://jsfiddle.net/Amiralen/qVR7u/
I would be grateful if it is possible to implement the function of clicking the banner itself, as it is the way I really want it to work instead of using a +/- symbol for the desired function.
Here is the HTML:
<div id="rightwrapper"><div id="demo-afghan">
<img src="http://static.squarespace.com/static/533e6e38e4b0e0ebd52168da/t/53829a06e4b011aa8ac06155/1401068038613/afghan_general.png"
class="hover"
class="img:hover"
/></a>
<p class="text">Our sister page, dedicated to Afghan history. Services provided in English and in Dari and Pashto.</p>
<article class="larticle">
<details class="ldetails">
<summary class="lsummary"></summary>
<p>
<br>
The history of Afghanistan is closely intertwined with that of Iran and the nations of Central Asia. With an eastern aspect towards India and China, Afghanistan was a cultural melting pot attesting to its multiethnic character. As a historic entity, Afghanistan comes into existence with the formation of the Hotaki dynasty; previously it had been part of a larger Iranian realm or ruled by foreign monarchs centered on the region's ancient Bactrian identity.
<br>
<br>
The banner portrays the Argali from the famous Tillya Tepe gold treasure.
</p>
</details>
</article>
</div>
</div>
Here is the CSS:
/* EXPAND TRIANGLE START */
#leftexpand summary.lsummary:-webkit-details-marker {
color: 000;
display: none;
font-size: 125%;
margin-right: 2px;
animation: fadein 3s;
-moz-animation: fadein 3s;
/* Firefox */
-webkit-animation: fadein 3s;
/* Safari and Chrome */
-o-animation: fadein 3s;
/* Opera */
height: 10px;
font-size: 20px;
overflow: hidden;
}
summary.lsummary:after {
background: transparent;
border-radius: 5px;
content:"+";
color: #000;
float: left;
font-size: 1.5em;
font-weight: bold;
margin: -5px 10px 0 0;
padding: 0;
text-align: center;
width: 20px;
}
details.ldetails[open] summary.lsummary:after {
content:"-";
}
summary.lsummary:focus {
outline-style: none;
animation: fadein 3s;
-moz-animation: fadein 3s;
/* Firefox */
-webkit-animation: fadein 3s;
/* Safari and Chrome */
-o-animation: fadein 3s;
/* Opera */
}
article.larticle > details.ldetails > summary.lsummary {
color: transparent;
font-size: 18px;
margin-top: 16px;
animation: fadein 3s;
-moz-animation: fadein 3s;
/* Firefox */
-webkit-animation: fadein 3s;
/* Safari and Chrome */
-o-animation: fadein 3s;
/* Opera */
}
details.ldetails > p {
margin-left: 24px;
animation: fadein 3s;
-moz-animation: fadein 3s;
/* Firefox */
-webkit-animation: fadein 3s;
/* Safari and Chrome */
-o-animation: fadein 3s;
/* Opera */
}
details.ldetails details.ldetails {
margin-left: 36px;
animation: fadein 3s;
-moz-animation: fadein 3s;
/* Firefox */
-webkit-animation: fadein 3s;
/* Safari and Chrome */
-o-animation: fadein 3s;
/* Opera */
}
details.ldetails details.ldetails summary.lsummary {
font-size: 16px;
animation: fadein 3s;
-moz-animation: fadein 3s;
/* Firefox */
-webkit-animation: fadein 3s;
/* Safari and Chrome */
-o-animation: fadein 3s;
/* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein {
/* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein {
/* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein {
/* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
/* EXPAND TRIANGLE END */
/* RIGHT CAPTION HOVER START */
#rightwrapper .text {
display: block;
position:relative;
text-align:right;
bottom:60px;
left:0px;
visibility:hidden;
background-color: rgba(255, 255, 255, 0.9);
top: -20px;
margin-bottom: -20px;
opacity: 0;
-webkit-transition: all 3000ms ease-out;
-moz-transition: all 3000ms ease-out;
-o-transition: all 3000ms ease-out;
-ms-transition: all 3000ms ease-out;
transition: all 3000ms ease-out;
}
#rightwrapper:hover .text {
visibility:visible;
opacity: .5;
}
/* RIGHT CAPTION HOVER END */
/* IMAGE ROLLOVER AFGHAN START */
#demo-afghan img {
opacity: .1;
background-color: #ffffff;
-webkit-transition: opacity, background-color .5s ease-out;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 2000ms;
}
#demo-afghan img:hover {
opacity: 1;
background-color: #bf0000;
-webkit-transition: opacity, background-color 1s ease-in;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 2000ms;
}
/* IMAGE ROLLOVER AFGHAN END */
I would however recommend reading the code at the jsfiddle that I have provided, for simplicity's sake. I hope there is a possible solution to this.
Thanks beforehand.
This is a solution that use Javascript but very minimally. Wrap the text you want to hide/show in a div with an id (I used the id text) and then add this code to your image :
onclick="document.getElementById('text').style.display = (document.getElementById('text').style.display != 'none') ? 'none' : 'inline';"
Here is the fiddle.
I'm trying to show a notification on button click. The button click actually checks for email validation. I know to show a div with content with the error message. However, I would like to fade out the error message, lets say after 5 seconds . I would like to achieve it using CSS. Below is my attempt, it just hides everything. Please advise.
#signup-response{
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #FF0000;
margin-top: 20px;
-webkit-transition: opacity 5s ease-in-out;
-moz-transition: opacity 35s ease-in-out;
-ms-transition: opacity 5s ease-in-out;
-o-transition: opacity 5s ease-in-out;
opacity: 0;
}
You can use animation example.
Set the animation-delay to the time you want. Make sure you use animation-fill-mode: forwards to stop the animation.
#signup-response{
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #FF0000;
margin-top: 20px;
animation:signup-response 0.5s 1;
-webkit-animation:signup-response 0.5s 1;
animation-fill-mode: forwards;
animation-delay:2s;
-webkit-animation-delay:1s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
}
#keyframes signup-response{
from {opacity :1;}
to {opacity :0;}
}
#-webkit-keyframes signup-response{
from {opacity :1;}
to {opacity :0;}
}
Using css3 keyframe animation:
(You'll probably want to add -webkit- -moz-, -ms-, and -o- prefixes on the animation and animation-delay properties inside .error-message and on the keyframes to support older browsers.)
.error-message {
animation: fadeOut 2s forwards;
animation-delay: 5s;
background: red;
color: white;
padding: 10px;
text-align: center;
}
#keyframes fadeOut {
from {opacity: 1;}
to {opacity: 0;}
}
<div class="error-message">
<p>Some random text</p>
</div>
cross browser hack (instead of using css3 animation keyframes):
transition-timing-function: cubic-bezier(1,1,1.0,0);}
-webkit-transition-timing-function: cubic-bezier(1,1,1.0,0);
http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp