Skip to content

Commit 734cdf8

Browse files
friuns3friuns3
committed
Merge PR animate-css#1891: feat : add WarningFlash animation (conflicts resolved: prefer PR changes)
2 parents 36b596b + 0b32241 commit 734cdf8

File tree

1 file changed

+80
-93
lines changed

1 file changed

+80
-93
lines changed

‎animate.css‎

Lines changed: 80 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
body{
2-
background-color: blueviolet
3-
}
1+
42
@charset "UTF-8";
53
/*!
64
* animate.css - https://animate.style/
75
* Version - 4.1.1
86
* Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
97
*
10-
* Copyright (c) 2023 Animate.css
8+
* Copyright (c) 2022 Animate.css
119
*/
1210
:root {
1311
--animate-duration: 1s;
@@ -19,8 +17,6 @@ body{
1917
animation-duration: 1s;
2018
-webkit-animation-duration: var(--animate-duration);
2119
animation-duration: var(--animate-duration);
22-
-webkit-animation-delay: var(--animate-delay);
23-
animation-delay: var(--animate-delay);
2420
-webkit-animation-fill-mode: both;
2521
animation-fill-mode: both;
2622
}
@@ -46,36 +42,31 @@ body{
4642
-webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
4743
animation-iteration-count: calc(var(--animate-repeat) * 3);
4844
}
49-
.animate__animated.animate__delay-1s,
50-
.animate__animated.animate__delay-1x {
45+
.animate__animated.animate__delay-1s {
5146
-webkit-animation-delay: 1s;
5247
animation-delay: 1s;
5348
-webkit-animation-delay: var(--animate-delay);
5449
animation-delay: var(--animate-delay);
5550
}
56-
.animate__animated.animate__delay-2s,
57-
.animate__animated.animate__delay-2x {
51+
.animate__animated.animate__delay-2s {
5852
-webkit-animation-delay: calc(1s * 2);
5953
animation-delay: calc(1s * 2);
6054
-webkit-animation-delay: calc(var(--animate-delay) * 2);
6155
animation-delay: calc(var(--animate-delay) * 2);
6256
}
63-
.animate__animated.animate__delay-3s,
64-
.animate__animated.animate__delay-3x {
57+
.animate__animated.animate__delay-3s {
6558
-webkit-animation-delay: calc(1s * 3);
6659
animation-delay: calc(1s * 3);
6760
-webkit-animation-delay: calc(var(--animate-delay) * 3);
6861
animation-delay: calc(var(--animate-delay) * 3);
6962
}
70-
.animate__animated.animate__delay-4s,
71-
.animate__animated.animate__delay-4x {
63+
.animate__animated.animate__delay-4s {
7264
-webkit-animation-delay: calc(1s * 4);
7365
animation-delay: calc(1s * 4);
7466
-webkit-animation-delay: calc(var(--animate-delay) * 4);
7567
animation-delay: calc(var(--animate-delay) * 4);
7668
}
77-
.animate__animated.animate__delay-5s,
78-
.animate__animated.animate__delay-5x {
69+
.animate__animated.animate__delay-5s {
7970
-webkit-animation-delay: calc(1s * 5);
8071
animation-delay: calc(1s * 5);
8172
-webkit-animation-delay: calc(var(--animate-delay) * 5);
@@ -2623,29 +2614,29 @@ body{
26232614
}
26242615
@-webkit-keyframes flipInX {
26252616
from {
2626-
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2627-
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2617+
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2618+
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
26282619
-webkit-animation-timing-function: ease-in;
26292620
animation-timing-function: ease-in;
26302621
opacity: 0;
26312622
}
26322623

26332624
40% {
2634-
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
2635-
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
2625+
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2626+
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
26362627
-webkit-animation-timing-function: ease-in;
26372628
animation-timing-function: ease-in;
26382629
}
26392630

26402631
60% {
2641-
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
2642-
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
2632+
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
2633+
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
26432634
opacity: 1;
26442635
}
26452636

26462637
80% {
2647-
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
2648-
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
2638+
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
2639+
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
26492640
}
26502641

26512642
to {
@@ -2655,29 +2646,29 @@ body{
26552646
}
26562647
@keyframes flipInX {
26572648
from {
2658-
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2659-
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2649+
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2650+
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
26602651
-webkit-animation-timing-function: ease-in;
26612652
animation-timing-function: ease-in;
26622653
opacity: 0;
26632654
}
26642655

26652656
40% {
2666-
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
2667-
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
2657+
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2658+
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
26682659
-webkit-animation-timing-function: ease-in;
26692660
animation-timing-function: ease-in;
26702661
}
26712662

26722663
60% {
2673-
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
2674-
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
2664+
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
2665+
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
26752666
opacity: 1;
26762667
}
26772668

26782669
80% {
2679-
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
2680-
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
2670+
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
2671+
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
26812672
}
26822673

26832674
to {
@@ -2693,29 +2684,29 @@ body{
26932684
}
26942685
@-webkit-keyframes flipInY {
26952686
from {
2696-
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2697-
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2687+
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2688+
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
26982689
-webkit-animation-timing-function: ease-in;
26992690
animation-timing-function: ease-in;
27002691
opacity: 0;
27012692
}
27022693

27032694
40% {
2704-
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2705-
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2695+
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
2696+
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
27062697
-webkit-animation-timing-function: ease-in;
27072698
animation-timing-function: ease-in;
27082699
}
27092700

27102701
60% {
2711-
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
2712-
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
2702+
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
2703+
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
27132704
opacity: 1;
27142705
}
27152706

27162707
80% {
2717-
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
2718-
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
2708+
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
2709+
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
27192710
}
27202711

27212712
to {
@@ -2725,29 +2716,29 @@ body{
27252716
}
27262717
@keyframes flipInY {
27272718
from {
2728-
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2729-
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2719+
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2720+
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
27302721
-webkit-animation-timing-function: ease-in;
27312722
animation-timing-function: ease-in;
27322723
opacity: 0;
27332724
}
27342725

27352726
40% {
2736-
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2737-
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2727+
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
2728+
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
27382729
-webkit-animation-timing-function: ease-in;
27392730
animation-timing-function: ease-in;
27402731
}
27412732

27422733
60% {
2743-
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
2744-
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
2734+
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
2735+
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
27452736
opacity: 1;
27462737
}
27472738

27482739
80% {
2749-
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
2750-
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
2740+
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
2741+
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
27512742
}
27522743

27532744
to {
@@ -2768,14 +2759,14 @@ body{
27682759
}
27692760

27702761
30% {
2771-
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
2772-
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
2762+
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2763+
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
27732764
opacity: 1;
27742765
}
27752766

27762767
to {
2777-
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2778-
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2768+
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2769+
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
27792770
opacity: 0;
27802771
}
27812772
}
@@ -2786,14 +2777,14 @@ body{
27862777
}
27872778

27882779
30% {
2789-
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
2790-
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
2780+
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2781+
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
27912782
opacity: 1;
27922783
}
27932784

27942785
to {
2795-
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2796-
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2786+
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2787+
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
27972788
opacity: 0;
27982789
}
27992790
}
@@ -2814,14 +2805,14 @@ body{
28142805
}
28152806

28162807
30% {
2817-
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2818-
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2808+
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
2809+
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
28192810
opacity: 1;
28202811
}
28212812

28222813
to {
2823-
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2824-
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2814+
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2815+
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
28252816
opacity: 0;
28262817
}
28272818
}
@@ -2832,14 +2823,14 @@ body{
28322823
}
28332824

28342825
30% {
2835-
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2836-
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2826+
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
2827+
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
28372828
opacity: 1;
28382829
}
28392830

28402831
to {
2841-
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2842-
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2832+
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2833+
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
28432834
opacity: 0;
28442835
}
28452836
}
@@ -2848,10 +2839,10 @@ body{
28482839
animation-duration: calc(1s * 0.75);
28492840
-webkit-animation-duration: calc(var(--animate-duration) * 0.75);
28502841
animation-duration: calc(var(--animate-duration) * 0.75);
2851-
-webkit-animation-name: flipOutY;
2852-
animation-name: flipOutY;
28532842
-webkit-backface-visibility: visible !important;
28542843
backface-visibility: visible !important;
2844+
-webkit-animation-name: flipOutY;
2845+
animation-name: flipOutY;
28552846
}
28562847
/* Lightspeed */
28572848
@-webkit-keyframes lightSpeedInRight {
@@ -3017,8 +3008,8 @@ body{
30173008
/* Rotating entrances */
30183009
@-webkit-keyframes rotateIn {
30193010
from {
3020-
-webkit-transform: rotate3d(0, 0, 1, 200deg);
3021-
transform: rotate3d(0, 0, 1, 200deg);
3011+
-webkit-transform: rotate3d(0, 0, 1, -200deg);
3012+
transform: rotate3d(0, 0, 1, -200deg);
30223013
opacity: 0;
30233014
}
30243015

@@ -3030,8 +3021,8 @@ body{
30303021
}
30313022
@keyframes rotateIn {
30323023
from {
3033-
-webkit-transform: rotate3d(0, 0, 1, 200deg);
3034-
transform: rotate3d(0, 0, 1, 200deg);
3024+
-webkit-transform: rotate3d(0, 0, 1, -200deg);
3025+
transform: rotate3d(0, 0, 1, -200deg);
30353026
opacity: 0;
30363027
}
30373028

@@ -3508,12 +3499,6 @@ body{
35083499
50% {
35093500
opacity: 1;
35103501
}
3511-
3512-
to {
3513-
opacity: 1;
3514-
-webkit-transform: scale3d(1, 1, 1);
3515-
transform: scale3d(1, 1, 1);
3516-
}
35173502
}
35183503
@keyframes zoomIn {
35193504
from {
@@ -3525,12 +3510,6 @@ body{
35253510
50% {
35263511
opacity: 1;
35273512
}
3528-
3529-
to {
3530-
opacity: 1;
3531-
-webkit-transform: scale3d(1, 1, 1);
3532-
transform: scale3d(1, 1, 1);
3533-
}
35343513
}
35353514
.animate__zoomIn {
35363515
-webkit-animation-name: zoomIn;
@@ -4093,21 +4072,29 @@ body{
40934072
-webkit-animation-name: slideOutUp;
40944073
animation-name: slideOutUp;
40954074
}
4096-
@keyframes shakeFade {
4075+
@keyframes WarningFlash {
40974076
0% {
4098-
transform: translateX(0);
4099-
opacity: 1;
4077+
text-shadow:
4078+
0 0 10px rgba(255, 200, 0, 0.3),
4079+
0 0 20px rgba(255, 200, 0, 0.2),
4080+
0 0 30px rgba(255, 200, 0, 0.1);
41004081
}
4082+
41014083
50% {
4102-
transform: translateX(-10px);
4103-
opacity: 0.5;
4084+
text-shadow:
4085+
0 0 20px #fff700,
4086+
0 0 40px #ffe347,
4087+
0 0 60px #ffcc00;
41044088
}
4089+
41054090
100% {
4106-
transform: translateX(0);
4107-
opacity: 1;
4091+
text-shadow:
4092+
0 0 10px rgba(255, 200, 0, 0.3),
4093+
0 0 20px rgba(255, 200, 0, 0.2),
4094+
0 0 30px rgba(255, 200, 0, 0.1);
41084095
}
41094096
}
4110-
4111-
.shake-fade {
4112-
animation-name: shakeFade;
4113-
}
4097+
.animate__WarningFlash{
4098+
-webkit-animation-name:WarningFlash ;
4099+
animation-name:WarningFlash;
4100+
}

0 commit comments

Comments
 (0)