diff --git a/style/css/style-large.css b/style/css/style-large.css index 8a8b90f..00a1268 100644 --- a/style/css/style-large.css +++ b/style/css/style-large.css @@ -15,8 +15,17 @@ body { height: fit-content; width: fit-content; margin: 2vh 1vw auto; - animation: .25s; +/* animation: .25s; + animation: show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) both; + transform: rotateX(-90deg); + transform-origin: top center;*/ } +/*@keyframes show { + 100% { + opacity: 1; + transform: none; + } +}*/ .pagecontent { min-width: 50%; flex: 1 1 0; diff --git a/style/css/toots.css b/style/css/toots.css index a36e4d8..5d19b7c 100644 --- a/style/css/toots.css +++ b/style/css/toots.css @@ -4,11 +4,24 @@ padding: 0; font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; margin: 0; + animation: show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) both; + height: 0; + transform: rotateX(-90deg); + transform-origin: top center; } .toot { /* border-bottom: 1px solid #ccc;*/ padding: 1rem; +/* animation: show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;*/ +} + + +@keyframes show { + 100% { + height: auto; + transform: none; + } } /* Posting user. */