lit-animista-effects
Version:
LitElement Animista Classes and Literals for use in styles.js files
470 lines (442 loc) • 18 kB
JavaScript
import {css} from 'lit-element';
/* ----------------------------------------------
* Generated by Animista on 2020-3-27 23:31:25
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation shadow-drop-2-center
* ----------------------------------------
*/
export const shadow_drop_2_center_keyframes = css`
@-webkit-keyframes shadow-drop-2-center {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
-webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
}
}
@keyframes shadow-drop-2-center {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
-webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
}
}
`;
/* ----------------------------------------------
* Generated by Animista on 2020-3-28 0:15:19
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation shadow-drop-2-tb
* ----------------------------------------
*/
export const shadow_drop_2_tb_keyframes = css`
@-webkit-keyframes shadow-drop-2-tb {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
-webkit-box-shadow: 0 -12px 20px -12px rgba(0, 0, 0, 0.35), 0 12px 20px -12px rgba(0, 0, 0, 0.35);
box-shadow: 0 -12px 20px -12px rgba(0, 0, 0, 0.35), 0 12px 20px -12px rgba(0, 0, 0, 0.35);
}
}
@keyframes shadow-drop-2-tb {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
-webkit-box-shadow: 0 -12px 20px -12px rgba(0, 0, 0, 0.35), 0 12px 20px -12px rgba(0, 0, 0, 0.35);
box-shadow: 0 -12px 20px -12px rgba(0, 0, 0, 0.35), 0 12px 20px -12px rgba(0, 0, 0, 0.35);
}
}`;
/* ----------------------------------------------
* Generated by Animista on 2020-3-28 0:21:22
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation shadow-drop-2-top
* ----------------------------------------
*/
export const shadow_drop_2_top_keyframes=css`
@-webkit-keyframes shadow-drop-2-top {
0% {
-webkit-transform: translateZ(0) translateY(0);
transform: translateZ(0) translateY(0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px) translateY(12px);
transform: translateZ(50px) translateY(12px);
-webkit-box-shadow: 0 -12px 20px -12px rgba(0, 0, 0, 0.35);
box-shadow: 0 -12px 20px -12px rgba(0, 0, 0, 0.35);
}
}
@keyframes shadow-drop-2-top {
0% {
-webkit-transform: translateZ(0) translateY(0);
transform: translateZ(0) translateY(0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px) translateY(12px);
transform: translateZ(50px) translateY(12px);
-webkit-box-shadow: 0 -12px 20px -12px rgba(0, 0, 0, 0.35);
box-shadow: 0 -12px 20px -12px rgba(0, 0, 0, 0.35);
}
}`;
/* ----------------------------------------------
* Generated by Animista on 2020-3-28 0:30:43
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation shadow-drop-2-tr
* ----------------------------------------
*/
export const shadow_drop_2_tr_keyframes = css`
@-webkit-keyframes shadow-drop-2-tr {
0% {
-webkit-transform: translateZ(0) translateX(0) translateY(0);
transform: translateZ(0) translateX(0) translateY(0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px) translateX(-12px) translateY(12px);
transform: translateZ(50px) translateX(-12px) translateY(12px);
-webkit-box-shadow: 12px -12px 20px -12px rgba(0, 0, 0, 0.35);
box-shadow: 12px -12px 20px -12px rgba(0, 0, 0, 0.35);
}
}
@keyframes shadow-drop-2-tr {
0% {
-webkit-transform: translateZ(0) translateX(0) translateY(0);
transform: translateZ(0) translateX(0) translateY(0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px) translateX(-12px) translateY(12px);
transform: translateZ(50px) translateX(-12px) translateY(12px);
-webkit-box-shadow: 12px -12px 20px -12px rgba(0, 0, 0, 0.35);
box-shadow: 12px -12px 20px -12px rgba(0, 0, 0, 0.35);
}
}`;
/* ----------------------------------------------
* Generated by Animista on 2020-3-28 0:33:32
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation shadow-drop-2-right
* ----------------------------------------
*/
export const shadow_drop_2_right_keyframes=css`
@-webkit-keyframes shadow-drop-2-right {
0% {
-webkit-transform: translateZ(0) translateX(0);
transform: translateZ(0) translateX(0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px) translateX(-12px);
transform: translateZ(50px) translateX(-12px);
-webkit-box-shadow: 12px 0 20px -12px rgba(0, 0, 0, 0.35);
box-shadow: 12px 0 20px -12px rgba(0, 0, 0, 0.35);
}
}
@keyframes shadow-drop-2-right {
0% {
-webkit-transform: translateZ(0) translateX(0);
transform: translateZ(0) translateX(0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px) translateX(-12px);
transform: translateZ(50px) translateX(-12px);
-webkit-box-shadow: 12px 0 20px -12px rgba(0, 0, 0, 0.35);
box-shadow: 12px 0 20px -12px rgba(0, 0, 0, 0.35);
}
}`;
/* ----------------------------------------------
* Generated by Animista on 2020-3-28 0:35:51
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation shadow-drop-2-br
* ----------------------------------------
*/
export const shadow_drop_2_br_keyframes = css`
@-webkit-keyframes shadow-drop-2-br {
0% {
-webkit-transform: translateZ(0) translateX(0) translateY(0);
transform: translateZ(0) translateX(0) translateY(0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px) translateX(-12px) translateY(-12px);
transform: translateZ(50px) translateX(-12px) translateY(-12px);
-webkit-box-shadow: 12px 12px 20px -12px rgba(0, 0, 0, 0.35);
box-shadow: 12px 12px 20px -12px rgba(0, 0, 0, 0.35);
}
}
@keyframes shadow-drop-2-br {
0% {
-webkit-transform: translateZ(0) translateX(0) translateY(0);
transform: translateZ(0) translateX(0) translateY(0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px) translateX(-12px) translateY(-12px);
transform: translateZ(50px) translateX(-12px) translateY(-12px);
-webkit-box-shadow: 12px 12px 20px -12px rgba(0, 0, 0, 0.35);
box-shadow: 12px 12px 20px -12px rgba(0, 0, 0, 0.35);
}
}`;
/* ----------------------------------------------
* Generated by Animista on 2020-3-28 0:39:57
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation shadow-drop-2-bottom
* ----------------------------------------
*/
export const shadow_drop_2_bottom_keyframes= css`
@-webkit-keyframes shadow-drop-2-bottom {
0% {
-webkit-transform: translateZ(0) translateY(0);
transform: translateZ(0) translateY(0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px) translateY(-12px);
transform: translateZ(50px) translateY(-12px);
-webkit-box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.35);
box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.35);
}
}
@keyframes shadow-drop-2-bottom {
0% {
-webkit-transform: translateZ(0) translateY(0);
transform: translateZ(0) translateY(0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px) translateY(-12px);
transform: translateZ(50px) translateY(-12px);
-webkit-box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.35);
box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.35);
}
}`;
/* ----------------------------------------------
* Generated by Animista on 2020-3-28 0:43:17
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation shadow-drop-2-bl
* ----------------------------------------
*/
export const shadow_drop_2_bl_keyframes = css`
@-webkit-keyframes shadow-drop-2-bl {
0% {
-webkit-transform: translateZ(0) translateX(0) translateY(0);
transform: translateZ(0) translateX(0) translateY(0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px) translateX(12px) translateY(-12px);
transform: translateZ(50px) translateX(12px) translateY(-12px);
-webkit-box-shadow: -12px 12px 20px -12px rgba(0, 0, 0, 0.35);
box-shadow: -12px 12px 20px -12px rgba(0, 0, 0, 0.35);
}
}
@keyframes shadow-drop-2-bl {
0% {
-webkit-transform: translateZ(0) translateX(0) translateY(0);
transform: translateZ(0) translateX(0) translateY(0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px) translateX(12px) translateY(-12px);
transform: translateZ(50px) translateX(12px) translateY(-12px);
-webkit-box-shadow: -12px 12px 20px -12px rgba(0, 0, 0, 0.35);
box-shadow: -12px 12px 20px -12px rgba(0, 0, 0, 0.35);
}
}`;
/* ----------------------------------------------
* Generated by Animista on 2020-3-28 0:45:26
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation shadow-drop-2-left
* ----------------------------------------
*/
export const shadow_drop_2_left_keyframes = css`
@-webkit-keyframes shadow-drop-2-left {
0% {
-webkit-transform: translateZ(0) translateX(0);
transform: translateZ(0) translateX(0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px) translateX(12px);
transform: translateZ(50px) translateX(12px);
-webkit-box-shadow: -12px 0 20px -12px rgba(0, 0, 0, 0.35);
box-shadow: -12px 0 20px -12px rgba(0, 0, 0, 0.35);
}
}
@keyframes shadow-drop-2-left {
0% {
-webkit-transform: translateZ(0) translateX(0);
transform: translateZ(0) translateX(0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px) translateX(12px);
transform: translateZ(50px) translateX(12px);
-webkit-box-shadow: -12px 0 20px -12px rgba(0, 0, 0, 0.35);
box-shadow: -12px 0 20px -12px rgba(0, 0, 0, 0.35);
}
}`;
/* ----------------------------------------------
* Generated by Animista on 2020-3-28 0:47:20
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation shadow-drop-2-tl
* ----------------------------------------
*/
export const shadow_drop_2_tl_keyframes = css`
@-webkit-keyframes shadow-drop-2-tl {
0% {
-webkit-transform: translateZ(0) translateX(0) translateY(0);
transform: translateZ(0) translateX(0) translateY(0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px) translateX(12px) translateY(12px);
transform: translateZ(50px) translateX(12px) translateY(12px);
-webkit-box-shadow: -12px -12px 20px -12px rgba(0, 0, 0, 0.35);
box-shadow: -12px -12px 20px -12px rgba(0, 0, 0, 0.35);
}
}
@keyframes shadow-drop-2-tl {
0% {
-webkit-transform: translateZ(0) translateX(0) translateY(0);
transform: translateZ(0) translateX(0) translateY(0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px) translateX(12px) translateY(12px);
transform: translateZ(50px) translateX(12px) translateY(12px);
-webkit-box-shadow: -12px -12px 20px -12px rgba(0, 0, 0, 0.35);
box-shadow: -12px -12px 20px -12px rgba(0, 0, 0, 0.35);
}
}`;
/* ----------------------------------------------
* Generated by Animista on 2020-3-28 0:50:50
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation shadow-drop-2-lr
* ----------------------------------------
*/
export const shadow_drop_2_lr_keyframes = css`
@-webkit-keyframes shadow-drop-2-lr {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
-webkit-box-shadow: -12px 0 20px -12px rgba(0, 0, 0, 0.35), 12px 0 20px -12px rgba(0, 0, 0, 0.35);
box-shadow: -12px 0 20px -12px rgba(0, 0, 0, 0.35), 12px 0 20px -12px rgba(0, 0, 0, 0.35);
}
}
@keyframes shadow-drop-2-lr {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
-webkit-box-shadow: -12px 0 20px -12px rgba(0, 0, 0, 0.35), 12px 0 20px -12px rgba(0, 0, 0, 0.35);
box-shadow: -12px 0 20px -12px rgba(0, 0, 0, 0.35), 12px 0 20px -12px rgba(0, 0, 0, 0.35);
}
}`;