Commit b0c00df

authored

Merge pull request #149 from AlsoKnownAs-Ax/feature/css-animations

[Feature - CSS] Feature/css animations

2 parents 87706b4 + 52be1f0 commit b0c00dfCopy full SHA for b0c00df

File tree

+152

-0

lines changed

+152

-0

lines changed

Lines changed: 24 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,24 @@`
	`1`	`+---`
	`2`	`+title: Blink Animation`
	`3`	`+description: Adds an infinite blinking animation to an element`
	`4`	`+author: AlsoKnownAs-Ax`
	`5`	`+tags: animation,blink,infinite`
	`6`	`+---`
	`7`	`+`
	`8`	+```css
	`9`	`+.blink {`
	`10`	`+ animation: blink 1s linear infinite;`
	`11`	`+}`
	`12`	`+`
	`13`	`+@keyframes blink{`
	`14`	`+ 0%{`
	`15`	`+ opacity: 0;`
	`16`	`+ }`
	`17`	`+ 50%{`
	`18`	`+ opacity: 1;`
	`19`	`+ }`
	`20`	`+ 100%{`
	`21`	`+ opacity: 0;`
	`22`	`+ }`
	`23`	`+}`
	`24`	+```

Lines changed: 27 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,27 @@`
	`1`	`+---`
	`2`	`+title: Pulse Animation`
	`3`	`+description: Adds a smooth pulsing animation with opacity and scale effects`
	`4`	`+author: AlsoKnownAs-Ax`
	`5`	`+tags: animation,pulse,pulse-scale`
	`6`	`+---`
	`7`	`+`
	`8`	+```css
	`9`	`+.pulse {`
	`10`	`+ animation: pulse 2s ease-in-out infinite;`
	`11`	`+}`
	`12`	`+`
	`13`	`+@keyframes pulse {`
	`14`	`+ 0% {`
	`15`	`+ opacity: 0.5;`
	`16`	`+ transform: scale(1);`
	`17`	`+ }`
	`18`	`+ 50% {`
	`19`	`+ opacity: 1;`
	`20`	`+ transform: scale(1.05);`
	`21`	`+ }`
	`22`	`+ 100% {`
	`23`	`+ opacity: 0.5;`
	`24`	`+ transform: scale(1);`
	`25`	`+ }`
	`26`	`+}`
	`27`	+```

Lines changed: 27 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,27 @@`
	`1`	`+---`
	`2`	`+title: Shake Animation`
	`3`	`+description: Adds a shake animation ( commonly used to mark invalid fields )`
	`4`	`+author: AlsoKnownAs-Ax`
	`5`	`+tags: shake,shake-horizontal`
	`6`	`+---`
	`7`	`+`
	`8`	+```css
	`9`	`+.shake {`
	`10`	`+ animation: shake .5s ease-in-out;`
	`11`	`+}`
	`12`	`+`
	`13`	`+@keyframes shake {`
	`14`	`+ 0%, 100% {`
	`15`	`+ transform: translateX(0);`
	`16`	`+ }`
	`17`	`+ 25% {`
	`18`	`+ transform: translateX(-10px);`
	`19`	`+ }`
	`20`	`+ 50% {`
	`21`	`+ transform: translateX(10px);`
	`22`	`+ }`
	`23`	`+ 75% {`
	`24`	`+ transform: translateX(-10px);`
	`25`	`+ }`
	`26`	`+}`
	`27`	+```

Lines changed: 24 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,24 @@`
	`1`	`+---`
	`2`	`+title: Slide-in Animation`
	`3`	`+description: Adds a slide-in from the right side of the screen`
	`4`	`+author: AlsoKnownAs-Ax`
	`5`	`+tags: animation,slide-in,slide-right`
	`6`	`+---`
	`7`	`+`
	`8`	+```css
	`9`	`+.slide-in {`
	`10`	`+ animation: slide-in 1s ease-in-out;`
	`11`	`+}`
	`12`	`+`
	`13`	`+@keyframes slide-in {`
	`14`	`+ from {`
	`15`	`+ scale: 300% 1;`
	`16`	`+ translate: 150vw 0;`
	`17`	`+ }`
	`18`	`+`
	`19`	`+ to {`
	`20`	`+ scale: 100% 1;`
	`21`	`+ translate: 0 0;`
	`22`	`+ }`
	`23`	`+}`
	`24`	+```

Lines changed: 50 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,50 @@`
	`1`	`+---`
	`2`	`+title: Typewriter Animation`
	`3`	`+description: Adds a typewriter animation + blinking cursor`
	`4`	`+author: AlsoKnownAs-Ax`
	`5`	`+tags: blinking,typewriter`
	`6`	`+---`
	`7`	`+`
	`8`	+```html
	`9`	`+ <div class="typewriter">`
	`10`	`+ <div>`
	`11`	`+ <p>Typerwriter Animation</p>`
	`12`	`+ </div>`
	`13`	`+ </div>`
	`14`	+```
	`15`	`+`
	`16`	+```css
	`17`	`+ .typewriter{`
	`18`	`+ display: flex;`
	`19`	`+ justify-content: center;`
	`20`	`+ }`
	`21`	`+`
	`22`	`+ .typewriter p {`
	`23`	`+ overflow: hidden;`
	`24`	`+ font-size: 1.5rem;`
	`25`	`+ font-family: monospace;`
	`26`	`+ border-right: 1px solid;`
	`27`	`+ margin-inline: auto;`
	`28`	`+ white-space: nowrap;`
	`29`	`+ /* The cursor will inherit the text's color by default */`
	`30`	`+ /* border-color: red */`
	`31`	`+ /* Steps: number of chars (better to set directly in js)*/`
	`32`	`+ animation: typing 3s steps(21) forwards,`
	`33`	`+ blink 1s step-end infinite;`
	`34`	`+ }`
	`35`	`+`
	`36`	`+ @keyframes typing{`
	`37`	`+ from{`
	`38`	`+ width: 0%`
	`39`	`+ }`
	`40`	`+ to{`
	`41`	`+ width: 100%`
	`42`	`+ }`
	`43`	`+ }`
	`44`	`+`
	`45`	`+ @keyframes blink{`
	`46`	`+ 50%{`
	`47`	`+ border-color: transparent;`
	`48`	`+ }`
	`49`	`+ }`
	`50`	+```

Comments

(0)