100 Days of Code, Day 11

31 October 2016

Today’s Progress: Web Development class was cancelled today— our professor most likely had to take his kids Trick or Treating tonight. So instead of getting assigned Assignment 3, we got assigned an in-class assignment #2.

This was an assignment using CSS3 animations, transitions, and keyframes, which I had no idea about. I looked it up on the internet and I got really frightened by it, like WTF is this?.

Then after reading several sources, I finally understood the syntax and how it works.

Thoughts: I don’t like CSS. In fact, I’ve gone on record about it:

https://twitter.com/TiffanyW_412/status/784917100422758400 (opens in a new tab)

https://twitter.com/TiffanyW_412/status/784917245805735936 (opens in a new tab)

https://twitter.com/TiffanyW_412/status/784917476391854080 (opens in a new tab)

But I found that I could do some pretty cool things with transition, animation, and @keyframes.

For instance, I have a circle I am animating with the bounceIn animation keyframe. You can do this with:

[html]

[css] html, body { height: 100%; }

body { display: flex; align-items: center; justify-content: center; position: relative; }

.element { height: 300px; width: 300px; background-color: #46D6D6; border-radius: 100%; animation: bounceIn 3s ease-in-out 4s, pulse 3s ease infinite alternate; }

@keyframes bounceIn { 0% { transform: scale(0.1); opacity: 0; } 60% { transform: scale(2); opacity: 1; } 100% { transform: scale(1); } } [/css]

This will make a circle with a medium turquoise background color. The first animation is bounceIn which will bounce the circle as it fades in. The second value is the animation-timing-function which will ease the bounce animation in and out, start to finish, for 4s.

Link to work:

You can find the CodePen below.

https://codepen.io/twhite96/pen/yamOrq (opens in a new tab)

31 October 2016

Today’s Progress: Web Development class was cancelled today— our professor most likely had to take his kids Trick or Treating tonight. So instead of getting assigned Assignment 3, we got assigned an in-class assignment #2.

This was an assignment using CSS3 animations, transitions, and keyframes, which I had no idea about. I looked it up on the internet and I got really frightened by it, like WTF is this?.

Then after reading several sources, I finally understood the syntax and how it works.

Thoughts: I don’t like CSS. In fact, I’ve gone on record about it:

https://twitter.com/TiffanyW_412/status/784917100422758400 (opens in a new tab)

https://twitter.com/TiffanyW_412/status/784917245805735936 (opens in a new tab)

https://twitter.com/TiffanyW_412/status/784917476391854080 (opens in a new tab)

But I found that I could do some pretty cool things with transition, animation, and @keyframes.

For instance, I have a circle I am animating with the bounceIn animation keyframe. You can do this with:

[html]

[css] html, body { height: 100%; }

body { display: flex; align-items: center; justify-content: center; position: relative; }

.element { height: 300px; width: 300px; background-color: #46D6D6; border-radius: 100%; animation: bounceIn 3s ease-in-out 4s, pulse 3s ease infinite alternate; }

@keyframes bounceIn { 0% { transform: scale(0.1); opacity: 0; } 60% { transform: scale(2); opacity: 1; } 100% { transform: scale(1); } } [/css]

This will make a circle with a medium turquoise background color. The first animation is bounceIn which will bounce the circle as it fades in. The second value is the animation-timing-function which will ease the bounce animation in and out, start to finish, for 4s.

Link to work:

You can find the CodePen below.

https://codepen.io/twhite96/pen/yamOrq (opens in a new tab)