Added new animation for tailwind

This commit is contained in:
Cüneyt Şentürk 2023-08-09 15:20:05 +03:00
parent 08bac7efff
commit 45a1e13753
2 changed files with 85 additions and 21 deletions

14
presets.js vendored
View File

@ -354,6 +354,16 @@ module.exports = {
marquee_long: {
'0%': { transform: 'translateX(0%)' },
'100%': { transform: 'translateX(-350%)' },
},
hourglass: {
'0%': { transform: 'rotate(180deg)' },
'100%': { transform: 'rotate(360deg)' },
},
setting: {
'0%': {transform: 'rotate(0deg)' },
'100%': { transform: 'rotate(360deg)'},
}
},
@ -365,7 +375,9 @@ module.exports = {
submit: 'submit 0.7s ease alternate infinite',
submit_second: 'submit_second 0.7s ease alternate infinite',
marquee: 'marquee 9s linear infinite',
marquee_long: 'marquee_long 14s linear infinite'
marquee_long: 'marquee_long 14s linear infinite',
hourglass: 'hourglass 1500ms infinite',
setting: 'setting 2000ms infinite'
},
transitionProperty: {

92
public/css/app.css vendored
View File

@ -11831,6 +11831,34 @@ button, input, optgroup, select, textarea{
-webkit-animation: bounce 1s infinite;
animation: bounce 1s infinite;
}
@-webkit-keyframes hourglass{
0%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes hourglass{
0%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.animate-hourglass{
-webkit-animation: hourglass 1500ms infinite;
animation: hourglass 1500ms infinite;
}
@-webkit-keyframes marquee{
0%{
@ -12005,6 +12033,34 @@ button, input, optgroup, select, textarea{
-webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@-webkit-keyframes setting{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes setting{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.animate-setting{
-webkit-animation: setting 2000ms infinite;
animation: setting 2000ms infinite;
}
@-webkit-keyframes spin{
to{
@ -63531,6 +63587,10 @@ body{
margin: 1px;
}
:is([dir="ltr"] .ltr\:-ml-10){
margin-left: -2.5rem;
}
:is([dir="ltr"] .ltr\:-ml-7){
margin-left: -1.75rem;
}
@ -63555,6 +63615,10 @@ body{
margin-right: 0.25rem;
}
:is([dir="ltr"] .ltr\:mr-10){
margin-right: 2.5rem;
}
:is([dir="ltr"] .ltr\:mr-2){
margin-right: 0.5rem;
}
@ -63567,14 +63631,6 @@ body{
margin-right: 1rem;
}
:is([dir="ltr"] .ltr\:-ml-10){
margin-left: -2.5rem;
}
:is([dir="ltr"] .ltr\:mr-10){
margin-right: 2.5rem;
}
:is([dir="ltr"] .ltr\:-rotate-90){
--tw-rotate: -90deg;
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -63867,10 +63923,6 @@ body{
padding-right: 1.5rem;
}
:is([dir="ltr"] .ltr\:pr-9){
padding-right: 2.25rem;
}
:is([dir="ltr"] .ltr\:text-left){
text-align: left;
}
@ -64556,6 +64608,10 @@ body{
margin: 1px;
}
:is([dir="rtl"] .rtl\:-mr-10){
margin-right: -2.5rem;
}
:is([dir="rtl"] .rtl\:-mr-7){
margin-right: -1.75rem;
}
@ -64564,6 +64620,10 @@ body{
margin-left: 0.25rem;
}
:is([dir="rtl"] .rtl\:ml-10){
margin-left: 2.5rem;
}
:is([dir="rtl"] .rtl\:ml-2){
margin-left: 0.5rem;
}
@ -64592,14 +64652,6 @@ body{
margin-right: 1rem;
}
:is([dir="rtl"] .rtl\:-mr-10){
margin-right: -2.5rem;
}
:is([dir="rtl"] .rtl\:ml-10){
margin-left: 2.5rem;
}
:is([dir="rtl"] .rtl\:-rotate-90){
--tw-rotate: -90deg;
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));