I found this toast/snackbar example on w3schools.com and I tried to change it a little bit for my needs but after fading out, it reappears again. Anyone could help me figure it out why?
https://jsfiddle.net/8qdx4j9g/
.toast {
visibility: visible;
min-width: 250px !important;
text-align: center;
padding: 16px;
z-index: 1;
font-size: 17px;
position: absolute;
left: 30px;
bottom: 30px;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
#-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
#keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
#-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
#keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
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;
}
This is my css
#snackbar {
float: bottom;
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #009688;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
right: 5%;
top: 10%;
font-size: 17px;
}
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
#-webkit-keyframes fadein {
from {top: 0; opacity: 0;}
to {top: 10%; opacity: 1;}
}
#keyframes fadein {
from {top: 0; opacity: 0;}
to {top: 10%; opacity: 1;}
}
#-webkit-keyframes fadeout {
from {top: 10%; opacity: 1;}
to {top: 0; opacity: 0;}
}
#keyframes fadeout {
from {top: 10%; opacity: 1;}
to {top: 0; opacity: 0;}
}
Is that possible to change all top values from typescript i need to give top value from html using #Input and is that possible to replace css "top" with css "bottom" by using angular 2?
You need to use ngClass:
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
I think there is no other ways.
Read more about ngClass here: https://angular.io/api/common/NgClass
I have added on my site loading animation prepared in CSS code. I have a problem because when the animation ends it all on the page is locked and nothing can be a click away.
.loader2 {
height: 100%;
position: absolute;
top: 0;
z-index: 400;
width: 100%;
-webkit-animation: loader2 2s linear 0s;
-moz-animation: loader2 2s linear 0s;
-o-animation: loader2 2s linear 0s;
animation: loader2 2s linear 0s;
}
#-webkit-keyframes loader2{ 0%{ background-color: #0000FF; opacity: 1; }
100%{ background-color: #ffffff; opacity: 0; }}
and in html (at the bottom of the code): <div class="loader2"></div>
I solved this problem, but it adds additional animations, which I do not need.
#-webkit-keyframes loader2{ 0%{ background-color: #0000FF; opacity: 1; width: 100%; }
100%{ background-color: #ffffff; opacity: 0; width: 0%; }}
try to change the z-index property on the last keyframe, setting a negative value
#-webkit-keyframes loader2{
0% { background-color: #0000FF; opacity: 1; z-index: 400; }
99.9% { background-color: #ffffff; opacity: 0; z-index: 400; }
100% { z-index: -1; }
}
I'm having issues in Chrome browser getting my animations to work correctly. Upon page load the first span in rw-words-1 is always off in its positioning for some reason. On the website when the page loads, it is supposed to read like...
Building "some text 1"
designed to "some word 1"
and then the words i've placed in quotes should fade out and the new words pop in like...
Building "some text 2"
designed to "some word 2"
etc, etc based on the html file below. The problem is the 2nd and 3rd span pop in the correct positioning, but the 1st span is always jumbled & overlapping the "designed to" text for some reason. It works fine however in Firefox / Safari. Any help would be much appreciated.
FRONT-END HTML
<div class="slogan">
<h1 class="rw-sentence">
<span>Building</span>
<div class="rw-words rw-words-1">
<span>some text 1...</span>
<span>some text 2...</span>
<span>some text 3...</span>
</div>
<br clear="all">
<span>designed to</span>
<div class="rw-words rw-words-2">
<span>some word 1</span>
<span>some word 2</span>
<span>some word 3</span>
</div>
</h1>
<p>Some sub-slogan here</p>
</div>
CSS:
/* ------ CSS ANIMATIONS ------- */
.rw-wrapper {
width: 90%;
padding: 10px;
}
.rw-sentence{
text-align: left;
position: relative;
}
.rw-sentence span {
white-space: nowrap;
}
.rw-words {
display: inline;
}
.rw-words span{
position: absolute;
opacity: 0;
width: 100%;
/* overflow: hidden; */
font-weight: bold;
}
.rw-words.rw-words-1 span {
margin-left: 0px;
}
/* -- WEIRD FIREFOX MARGIN HACK --*/
#-moz-document url-prefix() {
.rw-words.rw-words-1 span {
margin-left: 10px;
}
}
.rw-words.rw-words-2 span {
margin-left: 10px;
}
.rw-words-1 span{
animation: rotateWordsSecond 18s linear infinite 0s;
-webkit-animation: rotateWordsSecond 18s linear infinite 0s;
-moz-animation: rotateWordsSecond 18s linear infinite 0s;
-ms-animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words-2 span{
animation: rotateWordsSecond 18s linear infinite 0s;
-webkit-animation: rotateWordsSecond 18s linear infinite 0s;
-moz-animation: rotateWordsSecond 18s linear infinite 0s;
-ms-animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.rw-words span:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#keyframes rotateWordsFirst {
0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
#-moz-keyframes rotateWordsFirst {
0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
#-webkit-keyframes rotateWordsFirst {
0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
#keyframes rotateWordsSecond {
0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
10% { opacity: 1; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
#-moz-keyframes rotateWordsSecond {
0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
10% { opacity: 1; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
#-webkit-keyframes rotateWordsSecond {
0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
10% { opacity: 1; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
Well...I just changed some code around & added some margins/floats & it now works in all browsers. Still not sure why chrome treated the transitions/code from my original question differently though which is pretty frustrating. If anybody knows, i'd still love to know as I'm trying to get better at design that's consistent across all browsers. thx,
.rw-words {
display: inline;
float: left;
}
.rw-words span{
position: absolute;
opacity: 0;
width: 100%;
/* overflow: hidden; */
font-weight: bold;
}
.rw-words.rw-words-1 span {
margin-left: 165px;
font-weight: 480;
}
/* -- I REMOVED THE FIREFOX MARGIN HACK --*/
.rw-words.rw-words-2 span {
margin-left: 234px;
font-weight: 480;
}
Am trying to animate using css3 animation only,but also having the responsiveness maintained till ipad size.
I came across an issue where i need to move the box after the lights have come ON and i cant seem to do it.
My Fiddle
Here's what i have done so far..
body{
margin: 0;
padding: 0;
border: 0;
height:100%;
}
#container{
margin:0 auto;
float : none;
height: 100%;
width:100%;
}
#waveDisplay{
/*border: 1px solid black;*/
height: 7%;
position: absolute;
top: 16%;
width: 3%;
left: 58%;
overflow: hidden;
}
#waveImage{
vertical-align: middle;
height: 76%;
position: relative;
-webkit-animation-name:waveMoving;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count:infinite;
}
#-webkit-keyframes waveMoving{
from{-webkit-transform:translateX(0px);}
to{-webkit-transform:translateX(-75%);}
}
#innerWrapper{
border: 2px solid;
float:none;
position: relative;
width:100%;
height: auto;
background: no-repeat scroll 0 0;
background-size: 100% 100%;
}
#background{
max-width: 100%;
max-height: 100%;
}
.lights{
max-height: 38.3%;
max-width: 30%;
z-index: 100;
position: absolute;
opacity: 0;
animation:lightFading 0.1s;
-moz-animation:lightFading 0.1s; /* Firefox */
-webkit-animation: lightFadingIn 0.1s; /* safari and chrome*/
-o-animation:lightFading 0.1s; /* Opera */
-webkit-animation-delay: 5.2s;
-webkit-animation-fill-mode: forwards;
}
#keyframes lightFadingIn {
0% {opacity:0;}
100% {opacity:1;}
}
#-moz-keyframes lightFadingIn { /* Firefox */
0% {opacity:0;}
100% {opacity:1;}
}
#-webkit-keyframes lightFadingIn { /* Safari and Chrome */
0% {opacity:0;}
100% {opacity:1;}
}
#keyframes lightFadingOut {
0% {opacity:1;}
100% {opacity:0;}
}
#-moz-keyframes lightFadingOut { /* Firefox */
0% {opacity:1;}
100% {opacity:0;}
}
#-webkit-keyframes lightFadingOut { /* Safari and Chrome */
0% {opacity:1;}
100% {opacity:0;}
}
#light1{
top: 31%;
left: 14.8%;
}
#light2{
top: 31%;
left: 20.2%;
}
#cameraFlash{
top: 32%;
z-index: 100;
left: 21%;
-webkit-animation-name: cameraFlashDisplay 2s;
/*-webkit-animation: cameraFlash 0.2s;*/
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 0.2s;
-webkit-animation-delay: 5.2s;
-webkit-animation-fill-mode: forwards;
}
#keyframe cameraFlashDisplay {
0% {
transform: scaleY(0);
-webkit-transform: scaleY(0.0);
max-height:0;
}
100% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
max-height:100%;
}
}
#box1{
max-height: 17%;
max-width: 17%;
position: absolute;
top: 52%;
left: 5%;
-webkit-animation-name:boxMoving;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease-in;
/*-webkit-animation-iteration-count:infinite;*/
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes boxMoving{
from{-webkit-transform:translateX(0%);}
to{-webkit-transform:translateX(275%);}
}
Here's what i need to do in steps after the box has reached the 3lights:
1. Lights should turn OFF.
2. Box should keep on moving.
Can anyone help me out with this?
Am kinda new to css3 animation.
If the fiddle doesn't work,try clearing the cache and running it again.
Work with it this way DEMO
#box1{
max-height: 17%;
max-width: 17%;
position: absolute;
top: 52%;
left: -50px;
-webkit-animation-name:boxMoving;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease-in;
/*-webkit-animation-iteration-count:infinite;*/
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes boxMoving{
0% { margin-left:-20px;}
40% { margin-left:185px;}
50% { margin-left:185px; }
100% { margin-left:365px; }
}
And change the light and cameraflash animation durations and delays this way
.lights{
max-height: 38.3%;
max-width: 30%;
z-index: 100;
position: absolute;
opacity: 0;
animation:lightFading 1s;
-moz-animation:lightFading 1s; /* Firefox */
-webkit-animation: lightFadingIn 1s; /* safari and chrome*/
-o-animation:lightFading 1s; /* Opera */
-webkit-animation-delay: 2.0s;
-webkit-animation-fill-mode: forwards;
}
#keyframes lightFadingIn {
0% {opacity:0;}
80% {opacity:1;}
100% {opacity:0;}
}
#cameraFlash{
top: 32%;
z-index: 100;
left: 21%;
opacity:0;
-webkit-animation-name: cameraFlashDisplay 2s;
/*-webkit-animation: cameraFlash 0.2s;*/
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 2.0s;
-webkit-animation-fill-mode: forwards;
}
#keyframe cameraFlashDisplay {
0% {
opacity:0;
}
80% {
opacity:1;
}
100% {
opacity:1;
}
}
Hope it helps