Update beating-heart/README.md
This commit is contained in:
parent
14c5d062fa
commit
1e0bb18e01
|
|
@ -36,7 +36,7 @@ This block of CSS defines the formatting for the entire HTML document. Every ele
|
|||
|
||||
### h1
|
||||
|
||||
This CSS block defines custom formatting for all H1 tags.
|
||||
This CSS block defines custom formatting for all `<h1></h1>` tags.
|
||||
|
||||
````css
|
||||
h1 {
|
||||
|
|
@ -52,7 +52,7 @@ This CSS block defines custom formatting for all H1 tags.
|
|||
|
||||
### p
|
||||
|
||||
This CSS block defines custom formatting for all P tags.
|
||||
This CSS block defines custom formatting for all `<p></p>` tags.
|
||||
|
||||
````css
|
||||
p {
|
||||
|
|
@ -66,3 +66,245 @@ This CSS block defines custom formatting for all P tags.
|
|||
2. The top margin is set to 10 pixels.
|
||||
3. Using singled digit RGB Hex Values, the color is defined as 60 Red (4), 68 Green (4) and 68 Blue (4).
|
||||
|
||||
## Classes
|
||||
|
||||
### .heart
|
||||
|
||||
This block creates the area where we will draw and animate our heart.
|
||||
|
||||
````css
|
||||
.heart {
|
||||
width: 100px;
|
||||
height: 90px;
|
||||
position: relative;
|
||||
animation: beat 1.5s infinite 10s;
|
||||
}
|
||||
````
|
||||
|
||||
1. The width of the area is set to 100 pixels.
|
||||
2. The height of the area is set to 90 pixels.
|
||||
3. The position of the contents of this area are defined as relative from the top left 0px 0px to the bottom right 100px 90px.
|
||||
4. The animation `beat` is run as an infinite loop, where the keyframes are cycled from 0% to 100% every 1.5 seconds. The animation is also delayed to start 10 seconds after page load so that other animations can complete first.
|
||||
|
||||
### .heart::before, .heart::after
|
||||
|
||||
This block creates two additional areas, one before and one after the `.heart` area, and overlaps them with the `.heart` area.
|
||||
|
||||
````css
|
||||
.heart::before,
|
||||
.heart::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
background: red;
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
````
|
||||
|
||||
1. The content is left blank.
|
||||
2. The position of each of the additional areas is absolute to the original area, thus being top left 0px 0px and bottom right 100px 90px.
|
||||
3. The starting width of each of the additional areas is set to 1 pixel.
|
||||
4. The starting height of each of the additional areas is set to 1 pixel.
|
||||
5. The background color of each of the additional areas is set to Red (same as #ff0000 or #f00).
|
||||
6. The starting radius of the corners for each of the additional areas are set to 0, resulting in square corners.
|
||||
|
||||
### .heart::before
|
||||
|
||||
This block adds formatting and the animations that are unique to the area created before the `.heart` area.
|
||||
|
||||
````css
|
||||
.heart::before {
|
||||
left: 0px;
|
||||
transform: rotate(0deg);
|
||||
transform-origin: 0% 100%;
|
||||
animation: heartone 5s forwards, hearttwo 5s forwards 5s;
|
||||
}
|
||||
````
|
||||
|
||||
1. The starting position of the area is set to 0 pixels from the left of `.heart` area.
|
||||
2. The starting rotation of the area is set to 0 degrees.
|
||||
3. The point at which the rotation will pivot is set to 0% (most left) and 100% (most bottom) of the area.
|
||||
4. Two animations are run, `heartone` for 5 seconds with no repeat, and `hearttwo` for 5 seconds with no repeat but with a 5 second delay in order to allow the first animation to complete.
|
||||
|
||||
### .heart::after
|
||||
|
||||
This block adds formatting and the animations that are unique to the area created after the `.heart` area.
|
||||
|
||||
````css
|
||||
.heart::after {
|
||||
left: 0px;
|
||||
transform: rotate(0deg);
|
||||
transform-origin: 100% 100%;
|
||||
animation: heartone 5s forwards, heartthree 5s forwards 5s;
|
||||
}
|
||||
````
|
||||
|
||||
1. The starting position of the area is set to 0 pixels from the left of `.heart` area.
|
||||
2. The starting rotation of the area is set to 0 degrees.
|
||||
3. The point at which the rotation will pivot is set to 100% (most right) and 100% (most bottom) of the area.
|
||||
4. Two animations are run, `heartone` for 5 seconds with no repeat, and `heartthree` for 5 seconds with no repeat but with a 5 second delay in order to allow the first animation to complete.
|
||||
|
||||
## Animations
|
||||
|
||||
Animations are set using `@keyframes` blocks in CSS. In this example, we are using percentages to define the positions of an animation run. 0% being the start and 100% being the end. When an animation loops, then 100% is followed by 0%. (https://www.w3schools.com/cssref/atrule_keyframes.php)
|
||||
|
||||
### heartone
|
||||
|
||||
This block defines the keyframes for the animation called `heartone`.
|
||||
|
||||
````css
|
||||
@keyframes heartone {
|
||||
0% {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
50% {
|
||||
width: 50px;
|
||||
height: 90px;
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
100% {
|
||||
width: 50px;
|
||||
height: 90px;
|
||||
border-radius: 50px 50px 0 0;
|
||||
}
|
||||
}
|
||||
````
|
||||
|
||||
**At 0%:**
|
||||
1. The width is defined at 1 pixel.
|
||||
2. The height is defined at 1 pixel.
|
||||
3. The border radiuses are defined at 0.
|
||||
|
||||
**At 50%:**
|
||||
1. The width will gradually change until it reaches 50 pixels.
|
||||
2. The height will gradually change until it reaches 90 pixels.
|
||||
3. The border radiuses will remain at 0.
|
||||
|
||||
**At 100%:**
|
||||
1. The width will remain at 50 pixels.
|
||||
2. The height will remain at 90 pixels.
|
||||
3. The top left radius and top right radius will gradually change to 50 pixels. The bottom right and bottom left will remain 0 pixels.
|
||||
|
||||
### hearttwo
|
||||
|
||||
This block defines the keyframes for the animation called `hearttwo`.
|
||||
|
||||
````css
|
||||
@keyframes hearttwo {
|
||||
0% {
|
||||
left: 0px;
|
||||
transform: rotate(0deg);
|
||||
transform-origin: 0% 100%;
|
||||
}
|
||||
50% {
|
||||
left: 50px;
|
||||
transform: rotate(0deg);
|
||||
transform-origin: 0% 100%;
|
||||
}
|
||||
100% {
|
||||
left: 50px;
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: 0% 100%;
|
||||
}
|
||||
}
|
||||
````
|
||||
|
||||
**At 0%:**
|
||||
1. The position of the area is defined to be 0 pixels from the left.
|
||||
2. The area is defined to start with a 0 degree rotation.
|
||||
3. The point at which the rotation will pivot is set to 0% (most left) and 100% (most bottom) of the area.
|
||||
|
||||
**At 50%:**
|
||||
1. The position of the area is gradually moved 50 pixels from the left.
|
||||
2. The area is kept with a 0 degree rotation.
|
||||
3. The point at which the rotation will pivot is kept at 0% (most left) and 100% (most bottom) of the area.
|
||||
|
||||
**At 100%:**
|
||||
1. The position of the area is kept at 50 pixels from the left.
|
||||
2. The area will gradually rotate clockwise by 45 degrees.
|
||||
3. The point at which the rotation will pivot is kept at 0% (most left) and 100% (most bottom) of the area.
|
||||
|
||||
### heartthree
|
||||
|
||||
This block defines the keyframes for the animation called `heartthree`.
|
||||
|
||||
````css
|
||||
@keyframes heartthree {
|
||||
0% {
|
||||
left: 0px;
|
||||
transform: rotate(0deg);
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
50% {
|
||||
left: 0px;
|
||||
transform: rotate(0deg);
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
100% {
|
||||
left: 0px;
|
||||
transform: rotate(45deg);
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
}
|
||||
````
|
||||
|
||||
**At 0%:**
|
||||
1. The position of the area is defined to be 0 pixels from the left.
|
||||
2. The area is defined to start with a 0 degree rotation.
|
||||
3. The point at which the rotation will pivot is kept at 100% (most right) and 100% (most bottom) of the area.
|
||||
|
||||
**At 50%:**
|
||||
1. The position of the area is kept at 0 pixels from the left.
|
||||
2. The area is kept with a 0 degree rotation.
|
||||
3. The point at which the rotation will pivot is kept at 100% (most right) and 100% (most bottom) of the area.
|
||||
|
||||
**At 100%:**
|
||||
1. The position of the area is kept at 0 pixels from the left.
|
||||
2. The area will gradually rotate counter-clockwise by 45 degrees.
|
||||
3. The point at which the rotation will pivot is kept at 100% (most right) and 100% (most bottom) of the area.
|
||||
|
||||
### beat
|
||||
|
||||
This block defines the keyframes for the animation called `beat`.
|
||||
|
||||
````css
|
||||
@keyframes beat {
|
||||
0%, 30%, 50%, 70%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1.5) skewY(-15deg);
|
||||
}
|
||||
60% {
|
||||
transform: scale(1.5) skewY(15deg);
|
||||
}
|
||||
}
|
||||
````
|
||||
|
||||
**At 0%:**
|
||||
1. The scale of the area is set to 100% of it's inherited size.
|
||||
|
||||
**At 30%:**
|
||||
1. The scale of the area remains at 100% of it's inherited size.
|
||||
|
||||
**At 40%:**
|
||||
1. The scale of the area is gradually changed to 150% of it's inherited size.
|
||||
2. The area is gradually skewed on the Y axis by 15 degrees counter-clockwise.
|
||||
|
||||
**At 50%:**
|
||||
1. The scale of the area is gradually changed to 100% of it's inherited size.
|
||||
2. Because skewY is omitted, the previous skew transformation is gradually reverted.
|
||||
|
||||
**At 60%:**
|
||||
1. The scale of the area is gradually changed to 150% of it's inherited size.
|
||||
2. The area is gradually skewed on the Y axis by 15 degrees clockwise.
|
||||
|
||||
**At 70%:**
|
||||
1. The scale of the area is gradually changed to 100% of it's inherited size.
|
||||
2. Because skewY is omitted, the previous skew transformation is gradually reverted.
|
||||
|
||||
**At 100%:**
|
||||
1. The scale of the area remains at 100% of it's inherited size.
|
||||
Loading…
Reference in New Issue