avraham/pastebin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css animation on note creation

Browse Source
This commit is contained in:
brian
2021-04-12 15:13:43 -04:00
parent fe7abf342b
commit 8432255890
2 changed files with 52 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nginx/public_html/index.css
+52 -1
View File
@@ -64,6 +64,8 @@ body{
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: space-between; justify-content: space-between;
animation: bounce-in-fwd 0.8s ease-in-out both;
} }
.note > textarea{ .note > textarea{
@@ -74,4 +76,53 @@ body{
background-color: #aaccaa; background-color: #aaccaa;
border: none; border: none;
outline: none; outline: none;
} }
/* ----------------------------------------------
* Generated by Animista on 2021-4-12 15:12:16
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation bounce-in-fwd
* ----------------------------------------
*/
@keyframes bounce-in-fwd {
0% {
transform: scale(0);
animation-timing-function: ease-in;
opacity: 0;
}
38% {
transform: scale(1);
animation-timing-function: ease-out;
opacity: 1;
}
55% {
transform: scale(0.7);
animation-timing-function: ease-in;
}
72% {
transform: scale(1);
animation-timing-function: ease-out;
}
81% {
transform: scale(0.84);
animation-timing-function: ease-in;
}
89% {
transform: scale(1);
animation-timing-function: ease-out;
}
95% {
transform: scale(0.95);
animation-timing-function: ease-in;
}
100% {
transform: scale(1);
animation-timing-function: ease-out;
}
}
nginx/public_html/index.html
-3
View File
@@ -2,10 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>Tabler</title> <title>Tabler</title>
<!--<link rel="stylesheet" href="tachyons.min.css"></link>-->
<link rel="stylesheet" href="index.css"></link> <link rel="stylesheet" href="index.css"></link>
<!--<link rel="stylesheet" href="mini-default.min.css"></link>-->
<!--<link rel="stylesheet" href="animate.min.css"></link>-->
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="./mithril.min.js"></script> <script src="./mithril.min.js"></script>