End Times?
"Now I watched when the Lamb opened one of the seven seals, and I heard one of the four living creatures say with a voice like thunder, "Come!" And I looked, and behold, a white horse*!..."*
Is the current state of things/humanity almost unfathomably dark and chaotic or am I just projecting my own depressed pessimism onto everything around me. Really, what's going on?
Like, are we at the beginning of a surge in extreme weather events such as heatwaves, droughts, hurricanes, and floods? Are rising sea levels really threatening coastal cities in a way that will lead to widespread displacement of populations and the loss of critical infrastructure. Is the loss of biodiversity really accelerating as habitats shrink, endangering countless species and disrupting fragile ecosystems? Is the release of large amounts of greenhouse gases from melting permafrost and the potential collapse of key ocean currents really about to trigger irreversible feedback loops, amplifying the warming process beyond our control?
Or am I just being a downer?
Or, like, if the climate change stuff is true will it really destabilize even the most powerful governments sending us into a new type of feudalism in which the world's ever-stockpiling super-wealthy will employ the world's ever-expanding mercenary armies like Academi (formerly Blackwater), Defion, Aegis, G4s, Triple Canopy (to name only a few)?
Or am I just being a worry-wart?
Or, like, are we really watching the out-of-control escalation of an A.I. arms race that will inevitably bring about - for the FIRST time in human history - a (species?) with a superior intellect to our own? And are we really just assuming that the super-intelligent A.I. will be perfect out of the gate and somehow have a machine-consciousness approximation of human empathy AND be guided by that "empathy", treat us with respect, and allow us our dignity in a way that we've never been able to do for ourselves?
Or am I just having a bad day?
Or, how about this example:
I was out for a late-night drive in the city of Chicago and I looked, and behold, a white horse...
Was I really witnessing the the result of the lamb opening one of the seven seals? Was this really the start of the trials and tribulations? The Omega? The end times prophecized by the Apostle John in the book of revelations?
No.
Turns out - for some reason the Ace Hardware at the corner of Waukegan Rd and Pebble Creek Dr has a nice life-size statue of a white horse standing in the gravel at the base of the giant Ace Hardware sign...
Not too shabby, huh?
Also, it turns out I wasn't even in Chicago anymore, so if you're ever in Glenview, Illinois stop by the Ace and tell that horse Matt sent you!
Anyway...
CSS?
It might not be the end times but it's almost the end of my time in the coding boot camp. I've been enjoying CSS too much and using it to workrastinate.
(Workrastinate is a word I just coined while writing that last sentence but it feels like a keeper. To workcrastinate is to work on something that will contribute to the quality of your end goal but is nowhere near the top of the priority list and is actually an semi-irresponsible use of time.)
So, seeing as how this blog has developed into a platform for me to demonstrate how to use sophisticated coding languages to achieve short, primitive animations the following is an incomplete intro to doing just that with CSS.
Let's start with the "Big 3" - What Kevin Garnett, Paul Pierce, and Ray Allen were to the 2008 Celtics transforms, transistions, and keyframes will be to your animated elements...
Transforms: CSS transforms allow you to modify the appearance and position of an element in 2D or 3D space. They include various functions like translate, rotate, scale, skew, and matrix transformations. Transforms can be applied to an element using the transform property in CSS. For example, you can rotate an element by a certain degree, scale it to make it larger or smaller, or skew it to give it a tilted appearance. Transforms can be animated using transitions or keyframes.
transform: translateX(3em);
/* Moves the element along its x-axis by 3 times the size of the element's font (em) units. */
transform: translateY(50%);
/* Moves the element along its y-axis by 50% of its own height. */
transform: scale(1.5);
/* Increases the size of the element by 1.5 times its original size. */
transform: rotate(45deg);
/* Rotates the element by 45 degrees clockwise. */
transform: skewX(30deg);
/* Skews the element along its x-axis by 30 degrees. */
Transitions: CSS transitions define how an element should change its properties over a specified duration when a triggering event occurs, such as a mouse hover or click. They allow smooth and gradual changes from one state to another. Transitions are defined using the transition property in CSS, specifying the properties to transition, the duration, the timing function, and any delay before the transition starts. For example, you can create a transition that gradually changes the background color of a button when the user hovers over it.
transition: width 2s;
/* Specifies a transition effect for the width property that lasts for 2 seconds. */
transition: opacity 0.5s ease-in-out;
/* Specifies a transition effect for the opacity property that lasts for 0.5 seconds, using an ease-in-out timing function. */
transition: color 1s linear 0.3s;
/* Specifies a transition effect for the color property that lasts for 1 second, with a linear timing function and a delay of 0.3 seconds. */
Keyframes: CSS keyframes are used in conjunction with the @keyframes rule to define a set of styles that an element should have at specific points during an animation. Keyframes define the intermediate steps of an animation, allowing you to control how an element changes over time. Within the @keyframes rule, you specify percentages or specific points in time (using from and to or using percentage values) and define the styles that should be applied at each keyframe. The keyframes are then referenced using the animation property, which applies the animation to an element. You can specify the duration, timing function, delay, and iteration count for the animation.
@keyframes myAnimation { 0% { opacity: 0; } 50% { opacity: 0.5; } 100% { opacity: 1; } };
/* Defines a keyframe animation named myAnimation that changes the opacity of the element from 0% to 50% at the halfway point and then to 100% at the end. */
@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } };
/* Defines a keyframe animation named slideIn that slides the element from left to right, starting from a position 100% to the left (-100%) and ending at the original position (0). */
By combining transforms, transitions, and keyframes, you can create a wide range of animated effects in CSS. For example, you can animate the movement, rotation, or scaling of an element using transforms and transitions. Keyframes allow you to create complex animations with multiple stages and control the timing and appearance of an element throughout the animation.
CSS provides several predefined timing functions that you can use, and you can also create custom timing functions using cubic Bézier curves. Let's explore the different types of animation timing functions:
Predefined Timing Functions:
ease (default): This is the most commonly used timing function. It starts slowly, accelerates through the middle, and slows down towards the end.
lnear: It creates a linear animation, where the change occurs at a constant rate.
ease-in: The animation starts slowly and accelerates as it progresses.
ease-out: The animation starts quickly and decelerates towards the end.
ease-in-out: It combines the characteristics of ease-in and ease-out, starting slowly, accelerating, and then slowing down towards the end.
Custom Timing Functions:
CS allows you to create custom timing functions using cubic Bézier curves. These curves are defined by four control points: P0, P1, P2, and P3, where P0 is (0,0) and P3 is (1,1). By adjusting the control points, you can create unique timing functions.
Te cubic Bézier curve function is specified as cubic-bezier(P1x, P1y, P2x, P2y), where P1x and P1y represent the coordinates of control point P1, and P2x and P2y represent the coordinates of control point P2. The values of P1x, P1y, P2x, and P2y must be within the range of 0 to 1.
Here's an example of how to use an animation timing function in CSS:
.element {
animation: myAnimation 2s ease-in-out;
}
@keyframes myAnimation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
In CSS, the animation-direction property is used to specify the direction in which an animation should run. It determines whether the animation should play forward and then backward, or just forward, or loop continuously. The animation-direction property can take the following values:
normal (default): This value indicates that the animation should play forward from the beginning to the end, and then start over if the animation has a specified iteration count.
reverse: With this value, the animation runs backward, starting from the end and going back to the beginning. The reversed animation plays in the opposite direction of the normal animation.
alternate: This value specifies that the animation should play forward and then backward repeatedly. It alternates between the normal and reverse direction on each iteration.
alternate-reverse: Similar to alternate, this value starts the animation in reverse and then plays it forward. It also alternates between the reverse and normal direction on each iteration.
Here's an example that demonstrates the usage of animation-direction:
.element {
animation-name: myAnimation;
animation-duration: 2s;
animation-direction: alternate;
}
@keyframes myAnimation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
I don't have a codepen PRO account so they won't host my assets.
That's not even a problem. When I found out I was going that have to start a technical coding blog I rushed over to GoDaddy in spite of the fact that I loathe that name.
So you an take a look at the code sample below at my site:
GoldCashFreeMoney.FUN
<!DOCTYPE html>
<head>
<title>🖤🖤P🖤A🖤Z🖤U🖤Z🖤U🖤🖤</title>
<link href="index.css" rel="stylesheet" type="text/css">
<style>
body {
background-color: black;
text-align: center;
}
.wrapper {
filter: blur(1px);
}
.pazuzu1 {
width: 10%;
height: auto;
transform: translateX(3em);
animation: pazuzu1Animation 2s infinite linear;
}
.pazuzu2 {
width: 10%;
animation: pazuzu2Animation 2s infinite alternate;
}
.pazuzu3 {
width: 10%;
animation: pazuzu3Animation 2s infinite ease-in-out;
}
.pazuzu4 {
width: 10%;
animation: pazuzu4Animation 2s infinite linear;
}
.pazuzu5 {
width: 10%;
animation: pazuzu5Animation 2s infinite alternate-reverse;
}
.pazuzu6 {
width: 10%;
animation: pazuzu6Animation 2s infinite linear;
}
.pazuzu7 {
width: 10%;
animation: pazuzu7Animation 2s infinite ease-in-out;
}
.pazuzu8 {
width: 10%;
animation: pazuzu8Animation 2s infinite alternate;
}
@keyframes pazuzu1Animation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(300px) rotateZ(360deg);
}
}
@keyframes pazuzu2Animation {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(1.5);
}
}
@keyframes pazuzu3Animation {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100px);
}
}
@keyframes pazuzu4Animation {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@keyframes pazuzu5Animation {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(360deg);
}
}
@keyframes pazuzu6Animation {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
@keyframes pazuzu7Animation {
0% {
transform: scaleY(1);
}
100% {
transform: scaleY(0.5);
}
}
@keyframes pazuzu8Animation {
0% {
opacity: 0;
transform: rotateZ(0);
}
50% {
opacity: 1;
transform: rotateZ(180deg);
}
100% {
opacity: 0;
transform: rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<img class="pazuzu1" src="pazuzuTransparent.png" alt="pazuzu">
</div>
<div>
<img class="pazuzu2" src="pazuzuTransparent.png" alt="pazuzu">
</div>
<div>
<img class="pazuzu3" src="pazuzuTransparent.png" alt="pazuzu">
</div>
<div>
<img class="pazuzu4" src="pazuzuTransparent.png" alt="pazuzu">
</div>
<div>
<img class="pazuzu5" src="pazuzuTransparent.png" alt="pazuzu">
</div>
<div>
<img class="pazuzu6" src="pazuzuTransparent.png" alt="pazuzu">
</div>
<div>
<img class="pazuzu7" src="pazuzuTransparent.png" alt="pazuzu">
</div>
<div>
<img class="pazuzu8" src="pazuzuTransparent.png" alt="pazuzu">
</div>
</div>
</body>