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
Related
I have this problem with my CSS animation. I have an element position absolute centered in the middle of the page and when I put the animation on, it moves to the right and when the animation is finished it moves back to the middle of the page. Here's the code:
#keyframes motto
from
opacity: 0
transform: translate3d(0, -100%, 0)
to
opacity: 1
transform: none
#home
.motto
position: absolute
top: 50%
left: 50%
margin-right: -50%
transform: translate(-50%, -50%)
animation-name: motto
animation-duration: 2s
h1
margin: 0
font-size: 42px
font-weight: 100
opacity: .5
-webkit-animation-duration: 2s
Thx in advance!
#keyframes motto {
from {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.motto {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
animation-name: motto;
animation-duration: 2s;
}
.motto h1 {
margin: 0;
font-size: 42px;
font-weight: 100;
opacity: .5
-webkit-animation-duration: 2s;
}
<div class="motto"><h1>css <span>animation</span></h1></div>
Use the following line in the CSS of .motto :
animation-fill-mode: forwards;
This sets the element to display as it is in the final frame of the animation.
#keyframes motto {
from {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.motto {
position: absolute;
width: 400px;
left: 50%;
top: 50%;
margin-left: -200px;
animation-name: motto;
animation-duration: 2s;
animation-fill-mode: forwards;
}
.motto h1 {
margin: 0;
font-size: 42px;
font-weight: 100;
opacity: .5;
text-align: center;
}
<div class="motto"><h1>css <span>animation</span></h1></div>
I'm trying to create an animated text like bellow using css, how can i do this?
I already tried this:
span1 {
display: inline-block;
color: #e74c3c;
position: relative;
white-space: nowrap;
top: 0;
left: 0;
-webkit-animation: move 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 1s;
}
#keyframes move {
0% {
top: 0px;
}
20% {
top: -50px;
}
40% {
top: -100px;
}
60% {
top: -150px;
}
80% {
top: -200px;
}
100% {
top: -300px;
}
}
<span1>
web developer<br /> css cowboy<br /> self-facilitating media node<br /> box inside a box<br /> part of the problem
</span1>
but it has a delay after last text that i need to remove!
See This:
*{
box-sizing: border-box;
}
body {
background-color: skyblue;
}
div {
overflow: hidden;
color: #fff;
text-align: center;
font-size: 20px;
position: relative;
height: 100px;
margin-top: 100px;
}
div p {
height: 100px;
animation: move 7s infinite linear;
position: relative;
bottom: -100px;
font-size: 36px;
margin: 0;
}
#keyframes move {
0% {bottom: -100px;}
10%, 20% {bottom: 0px}
40%,50% {bottom: 100px;}
70%,80% {bottom: 200px;}
100% {bottom: 300px}
}
<div>
<p>50% OFF</p>
<p>Some Text</p>
<p>Write by: Ehsan Taghdisi</p>
</div>
.anim1 {
animation: anim1 1.5s infinite;
}
.anim2 {
animation: anim2 1.5s infinite;
}
#keyframes anim1 {
0% {
transform: translateY(-10px);
}
50% {
transform: translateY(-80px);
}
100% {
transform: translateY(-10px);
}
}
#keyframes anim2 {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-80px);
}
100% {
transform: translateY(0px);
}
}
<div style="height:40px;overflow:hidden">
<h1 class="anim1">Hello animation 1</h1>
<h1 class="anim2">Hello animation 2</h1>
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;}
}
I have the two divs hat and key that I want to use in transitions. The div "hat" works but the other does not. I do not know why the div "sock" does not work. It is the same as "hat" but still does not work. I have tried to change the #keyframe pageExitRight property from "right: 40" to "left: 40" still did not change anything.
body {
background-color: white;
}
.box {
/* TITLES OF CHOICES */
position: relative;
background-color: gainsboro;
border-radius: 50%;
width: 400px;
height: 400px;
display: inline-block;
margin: 10%;
transition: all 1s;
}
#hat {
animation-name: pageExitLeft;
animation-timing-function: ease-out;
animation-duration: 2s;
position: relative;
background-image: url(hat.jpg);
background-position: center;
}
#sock {
animation-name: pageExitRight;
animation-timing-function: ease-out;
animation-duration: 2s;
position: relative;
background-image: url(sock.jpeg);
background-position: center;
}
div.box:hover{
/* CHANGE COLOR WHEN MOUSE HOVER */
opacity: 0.5;
}
#keyframes pageExitLeft {
from {left: 40; opacity: 1}
to {left: -440; opacity: 0}
}
#keyframes pageExitRight {
from {right: 40; opacity: 1}
to {right: -440; opacity: 0}
}
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="box" id="hat" >hat</div>
<div class="box" id="sock">sock</div>
</body>
</html>
You are missing units inside the #keyframes. You say left: 40, right: 40, left: -440, right: -440, but you do not specify what these numbers are.
Try this css:
body {
background-color: white;
}
.box {
/* TITLES OF CHOICES */
position: relative;
background-color: gainsboro;
border-radius: 50%;
width: 400px;
height: 400px;
display: inline-block;
margin: 10%;
transition: all 1s;
}
#hat {
animation-name: pageExitLeft;
animation-timing-function: ease-out;
animation-duration: 2s;
position: relative;
background-image: url(hat.jpg);
background-position: center;
}
#sock {
animation-name: pageExitRight;
animation-timing-function: ease-out;
animation-duration: 2s;
position: relative;
background-image: url(sock.jpeg);
background-position: center;
}
div.box:hover{
/* CHANGE COLOR WHEN MOUSE HOVER */
opacity: 0.5;
}
#keyframes pageExitLeft {
from {left: 40px; opacity: 1}
to {left: -440px; opacity: 0}
}
#keyframes pageExitRight {
from {right: 40px; opacity: 1}
to {right: -440px; opacity: 0}
}
I have the following CSS Plunker Example:
#-webkit-keyframes ngdialog-fadeout {
0% {opacity: 1;}
100% {opacity: 0; }
}
#keyframes ngdialog-fadeout {
0% {opacity: 1;}
100% {opacity: 0; }
}
.ngdialog.ngdialog-closing .ngdialog-overlay {
-webkit-backface-visibility: hidden;
-webkit-animation: ngdialog-fadeout 0.5s;
animation: ngdialog-fadeout 0.5s;
}
.ngdialog.ngdialog-closing .ngdialog-content {
-webkit-backface-visibility: hidden;
-webkit-animation: ngdialog-fadeout 0.5s;
animation: ngdialog-fadeout 0.5s;
}
I do not want to use animation. So I tried the following:
.ngdialog.ngdialog-closing .ngdialog-overlay {
visibility: hidden;
}
.ngdialog.ngdialog-closing .ngdialog-content {
visibility: hidden;
}
I am able to hide it but after doing it every link on the page is non reactive like something is over it ...
What am I missing?
UPDATE
I tried the following:
.ngdialog {
bottom: 0;
left: 0;
overflow: auto;
position: fixed;
right: 0;
top: 0;
z-index: 10000;
-webkit-overflow-scrolling: touch;
}
.ngdialog-overlay {
background-color: black;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
opacity: 0.6;
z-index: 100000;
}
.ngdialog.ngdialog-closing .ngdialog-overlay {
opacity: 0;
visibility: hidden;
}
.ngdialog-content {
background: white;
}
.ngdialog.ngdialog-closing .ngdialog-content {
opacity: 0;
visibility: hidden;
}
The same problem happens ...
Best way that I could find to "disable" animations from ngDialog is actually to speed them up so that they won't be visible anymore.
.ngdialog * {
-webkit-animation-duration: 0.01s !important;
-moz-animation-duration: 0.01s !important;
-o-animation-duration: 0.01s !important;
-ms-animation-duration: 0.01s !important;
animation-duration: 0.01s !important;
}