From 5c36b307d197bba61ce941872e40e1a5f083b563 Mon Sep 17 00:00:00 2001
From: HluvukoMavundza <115592094+HluvukoMavundza@users.noreply.github.com>
Date: Mon, 24 Oct 2022 23:11:08 +0200
Subject: [PATCH] CSS Hover Animation
I added a CSS hover animation file
---
CSS-Animations/index.html | 13 +++++++++++++
CSS-Animations/style.css | 36 ++++++++++++++++++++++++++++++++++++
2 files changed, 49 insertions(+)
create mode 100644 CSS-Animations/index.html
create mode 100644 CSS-Animations/style.css
diff --git a/CSS-Animations/index.html b/CSS-Animations/index.html
new file mode 100644
index 0000000..5fded72
--- /dev/null
+++ b/CSS-Animations/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+ CSS Animation
+
+
+
+
+
+
\ No newline at end of file
diff --git a/CSS-Animations/style.css b/CSS-Animations/style.css
new file mode 100644
index 0000000..899a068
--- /dev/null
+++ b/CSS-Animations/style.css
@@ -0,0 +1,36 @@
+
+.parent{
+ background-color:hsla(200, 100%, 20%);
+ height: 400px;
+ width: 400px;
+ }
+ .child{
+ background-color: yellow;
+ height: 50%;
+ width: 50%;
+ transition: transform 1s ease-in;
+ }
+
+ .parent:hover .child{
+ animation: left-to-right 1s ease-in forwards 3 alternate;
+
+ }
+
+ @keyframes left-to-right {
+ 0% {
+ background-color: yellow;
+ transform: translateX(0);
+ }
+ 33% {
+ transform: translateY(100%);
+ }
+ 66% {
+ transform: translateX(100%) translateY(100%);
+ }
+ 100% {
+ background-color: blue;
+ transform: translateX(100%);
+ }
+ }
+
+