CSS Animations Goodie (#3424)

* Base created * YML File Updated * Codepen logo added * Logo renamed | urls added * Initial version added * Removes unwanted CSS * Remove codepen logo * Removes cssanimations.js * Restructuring things * Fixes bareword test file issue * Test File fixed * CSS Tricks Demos added * Changes to tile and data * Title added and styled * Adds 2 demos to Goodie * Fixes margin between title and demo * Modularizing demos * CSS Animations: Makes code more modular * Data YML updated * Fixes no file exist issue * Minor changes in test file * Fix: Reduces width of tile, fixes animation overflows * Feature: CodePen AutoPen Generation added * Fix: Test File fixed * Add: Proportional Animations * Add: Changing transform-origin mid-animation * Add: Negative transform-origins * Add: Box shadow magic * Fix: Fix conflict in CSS * Update: Removes unnecessary keys * Fix: Warnings and errors for https * Fix: Fixes text in demo 1 * Formats: Formats all CSS Stylesheets * Fix: Handles unnecessary triggering * Fix: Handles if variables are undefined * Adds: Adds more test cases * Fix: Moves logic to a separate sub routine * Fix: Removes external resource usage
duckduckgo · Dec 15, 2016 · 190fd44 · 190fd44
1 parent cceafc1
commit 190fd44
Show file tree

Hide file tree

Showing 17 changed files with 705 additions and 0 deletions.
diff --git a/lib/DDG/Goodie/CssAnimations.pm b/lib/DDG/Goodie/CssAnimations.pm
@@ -0,0 +1,65 @@
+package DDG::Goodie::CssAnimations;
+# ABSTRACT: Shows examples of CSS Animations from various references
+
+use DDG::Goodie;
+use YAML::XS 'LoadFile';
+use strict;
+use warnings;
+use JSON;
+
+zci answer_type => 'css_animations';
+
+zci is_cached => 1;
+
+triggers start => 'css animations', 'css animations example', 'css animation', 'css animation examples', 
+                  'css animation demo', 'css animations demos', 'css animations demo', 'css animation demos';
+
+my $animations = LoadFile(share('data.yml'));
+
+sub build_response() {
+
+    my $demo_count = keys $animations;
+
+    my @result = ();
+
+    for (my $i=0; $i < $demo_count; $i++) {
+        my $demo = "demo_$i";
+        my $title = $animations->{$demo}->{'title'};
+        my $html = share("$demo/demo.html")->slurp if -e share("$demo/demo.html");
+        my $css = share("$demo/style.css")->slurp if -e share("$demo/style.css");
+        my %value = ('title' => $title, 'html' => $html, 'css' => $css);
+
+        $animations->{$demo}->{'html'} = $html || '';
+        $animations->{$demo}->{'css'} = $css || '';
+        $animations->{$demo}->{'value'} = encode_json \%value || '';
+        push(@result, $animations->{$demo});
+    }
+
+    return @result;
+}
+
+my @result = build_response();
+
+handle remainder => sub {
+    return unless $_ eq '';
+
+    return 'CSS Animations',
+        structured_answer => {
+            id => 'css_animations',
+            name => 'CSS Animations',
+            data => \@result,
+            templates => {
+                group => 'base',
+                detail => 0,
+                item_detail => 0,
+                options => {
+                    content => 'DDH.css_animations.content'
+                },
+                variants => {
+                    tile => 'xwide'
+                }
+            }
+        };
+};
+
+1;
diff --git a/share/goodie/css_animations/content.handlebars b/share/goodie/css_animations/content.handlebars
@@ -0,0 +1,14 @@
+<form action="https://codepen.io/pen/define" method="POST" target="_blank">
+    <input type="hidden" name="data" value="{{ value }}" />
+    <div onclick="javascript:this.parentNode.submit();">
+        <div class="tile--css_animations__title">
+            {{ title }}
+        </div>
+        <div class="tile--css_animations__demo">
+            <style type="text/css">
+                {{{ css }}}
+            </style>
+            {{{ html }}}
+        </div>
+    </div>
+</form>
diff --git a/share/goodie/css_animations/css_animations.css b/share/goodie/css_animations/css_animations.css
@@ -0,0 +1,14 @@
+.tile--css_animations {
+    cursor: pointer !important;
+}
+
+.tile--css_animations__title {
+    font-size: 110%;
+    font-weight: 900;
+    margin-bottom: 6px;
+}
+
+.tile--css_animations__demo {
+    width: 230px;
+    height: 230px;
+}
diff --git a/share/goodie/css_animations/data.yml b/share/goodie/css_animations/data.yml
@@ -0,0 +1,13 @@
+---
+"demo_0": 
+    title: "Jump to another state mid-animation"
+"demo_1":
+    title: "Negative animation delays"
+"demo_2":
+    title: "Proportional animations"
+"demo_3":
+    title: "Changing transform-origin mid-animation"
+"demo_4":
+    title: "Negative transform-origins"
+"demo_5":
+    title: "Box shadow magic"
diff --git a/share/goodie/css_animations/demo_0/demo.html b/share/goodie/css_animations/demo_0/demo.html
@@ -0,0 +1,6 @@
+<div class="tile--css_animations__demo1">
+    <div>
+        <p id="status">O<span>P</span>EN</p>
+        <p id="message">CO<span>M</span><span>E</span> IN!</p>
+    </div>
+</div>
diff --git a/share/goodie/css_animations/demo_0/style.css b/share/goodie/css_animations/demo_0/style.css
@@ -0,0 +1,77 @@
+.tile--css_animations__demo1 {
+    background-color: #111111;
+    height: 100%;
+}
+.tile--css_animations__demo1 div {
+    padding: 40px;
+    font-size: 36px;
+    font-family: monospace;
+    text-align: center;
+    text-transform: uppercase;
+    text-shadow: 0 0 80px red, 0 0 30px FireBrick, 0 0 6px DarkRed;
+    color: red;
+}
+.tile--css_animations__demo1 div p {
+    margin: 0;
+}
+.tile--css_animations__demo1 #status:hover {
+    text-shadow: 0 0 200px #ffffff, 0 0 80px #008000, 0 0 6px #0000ff;
+}
+.tile--css_animations__demo1 #message {
+    font-size: 20px;
+}
+.tile--css_animations__demo1 #message:hover {
+    text-shadow: 0 0 100px red, 0 0 40px FireBrick, 0 0 8px DarkRed;
+}
+.tile--css_animations__demo1 #status {
+    color: #fff;
+    text-shadow: 0 0 80px #ffffff, 0 0 30px #008000, 0 0 6px #0000ff;
+}
+.tile--css_animations__demo1 #status span {
+    animation: upper 11s linear infinite;
+}
+.tile--css_animations__demo1 #message span:nth-of-type(2) {
+    animation: lower 10s linear infinite;
+}
+.tile--css_animations__demo1 #message span:nth-of-type(1) {
+    text-shadow: none;
+    opacity: .4;
+}
+@keyframes upper {
+    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
+        opacity: .99;
+        text-shadow: 0 0 80px #ffffff, 0 0 30px #008000, 0 0 6px #0000ff;
+    }
+    20%,
+    21.999%,
+    63%,
+    63.999%,
+    65%,
+    69.999% {
+        opacity: 0.4;
+        text-shadow: none;
+    }
+}
+@keyframes lower {
+    0%, 12%, 18.999%, 23%, 31.999%, 37%, 44.999%, 46%, 49.999%, 51%, 58.999%, 61%, 68.999%, 71%, 85.999%, 96%, 100% {
+        opacity: 0.99;
+        text-shadow: 0 0 80px red, 0 0 30px FireBrick, 0 0 6px DarkRed;
+    }
+    19%,
+    22.99%,
+    32%,
+    36.999%,
+    45%,
+    45.999%,
+    50%,
+    50.99%,
+    59%,
+    60.999%,
+    69%,
+    70.999%,
+    86%,
+    95.999% {
+        opacity: 0.4;
+        text-shadow: none;
+    }
+}
diff --git a/share/goodie/css_animations/demo_1/demo.html b/share/goodie/css_animations/demo_1/demo.html
@@ -0,0 +1,5 @@
+<div class="tile--css_animations__demo2">
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
diff --git a/share/goodie/css_animations/demo_1/style.css b/share/goodie/css_animations/demo_1/style.css
@@ -0,0 +1,60 @@
+.tile--css_animations__demo2 div {
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    left: 75%;
+    width: 100%;
+}
+.tile--css_animations__demo2 div:nth-of-type(odd) {
+    background: black;
+}
+.tile--css_animations__demo2 div:nth-of-type(even) {
+    background: white;
+    border: 2px solid black;
+}
+.tile--css_animations__demo2 div:nth-of-type(3) {
+    height: 10px;
+    width: 10px;
+    margin-top: -5px;
+    margin-left: -5px;
+    -webkit-animation: slide 3s ease-in-out infinite;
+    animation: slide 3s ease-in-out infinite;
+}
+.tile--css_animations__demo2 div:nth-of-type(2) {
+    height: 20px;
+    width: 20px;
+    margin-top: -12px;
+    margin-left: -12px;
+    -webkit-animation: slide 3s -2.7s ease-in-out infinite;
+    animation: slide 3s -2.7s ease-in-out infinite;
+}
+.tile--css_animations__demo2 div:nth-of-type(1) {
+    height: 40px;
+    width: 40px;
+    margin-top: -20px;
+    margin-left: -20px;
+    -webkit-animation: slide 3s -2.4s ease-in-out infinite;
+    animation: slide 3s -2.4s ease-in-out infinite;
+}
+@keyframes slide {
+    0% {
+        left: 75%
+    }
+    50% {
+        left: 25%;
+    }
+    100% {
+        left: 75%;
+    }
+}
+@-webkit-keyframes slide {
+    0% {
+        left: 75%
+    }
+    50% {
+        left: 25%;
+    }
+    100% {
+        left: 75%;
+    }
+}
diff --git a/share/goodie/css_animations/demo_2/demo.html b/share/goodie/css_animations/demo_2/demo.html
@@ -0,0 +1,26 @@
+<div class="tile--css_animations__demo3">
+    <span>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </span>
+</div>