transition-style bump to 0.1.0

README.md

@@ -24,7 +24,7 @@ Import the CSS and set an attribute on some HTML:
 ```html
 <link rel="stylesheet" href="https://unpkg.com/transition-style">
 
-<div transition="in:wipe:up">
+<div transition-style="in:wipe:up">
   👍
 </div>
 ```
@@ -80,18 +80,22 @@ by importing only the custom properties and base styles:
 After `transition.css` has been added to your project, add an attribute to an element and watch the magic:  
 
 ```html
-<div transition="in:circle:bottom-right">
+<div transition-style="in:circle:bottom-right">
   A transitioned IN element
 </div>
 
-<div transition="out:wipe:down">
+<div transition-style="out:wipe:down">
   A transitioned OUT element
 </div>
 ```
 
 > if nothing is happening when using the attributes, it's likely `transition.css` has not loaded
 
+<<<<<<< HEAD
 <br>
+=======
+Attributes were chosen as the default so there's no question which transition is active. **There can be only 1 at a time.** With classes, for example, what happens when multiple "transition in" classes are applied to an element? Transition.css chooses to default with a state machine approach so things like a classname collision doesn't need solved. See the [custom](#custom) section below for ways to use classes and/or the shape custom properties so transition.css can fit into your development environment. The built in attribute based approach is very easy to hack, customize and escape. 
+>>>>>>> 5cc68bf (move to hyphen, breaking version change)
 
 #### Using `@keyframes`
 Each bundle ships with the `@keyframes` declared, and you can use them as you see fit. You can use these to build your own animations or just hook into the presets in your own way:
@@ -152,7 +156,7 @@ Go off the rails and build your own transitions with these variables. There's ev
 Then, in the HTML:
 
 ```html
-<div transition class="... --in-custom">
+<div transition-style class="--in-custom">
   A custom transitioned element
 </div>
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "transition-style",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "author": "Adam Argyle",
   "description": "just add water clip-path mask transitions",
   "license": "ISC",
@@ -13,7 +13,8 @@
     "css",
     "transitions",
     "animations",
-    "masking"
+    "masking",
+    "clip-path"
   ],
   "main": "transition.min.css",
   "style": "transition.min.css",

src/_base.css

@@ -1,4 +1,4 @@
-[transition] {
+[transition-style] {
   animation-delay: var(--transition__delay, 0);
   animation-duration: var(--transition__duration, 2.5s);
   animation-timing-function: var(--transition__easing, cubic-bezier(.25, 1, .30, 1));
@@ -7,7 +7,7 @@
 }
 
 @media print, (prefers-reduced-motion: reduce) {
-  [transition] {
+  [transition-style] {
     animation-duration: 1ms !important;
     transition-duration: 1ms !important;
     animation-iteration-count: 1 !important;

src/circles/in-bottom-left.css

@@ -7,6 +7,6 @@
   }
 }
 
-[transition="in:circle:bottom-left"] {
+[transition-style="in:circle:bottom-left"] {
   animation-name: circle-in-bottom-left;
 }

src/circles/in-bottom-right.css

@@ -7,6 +7,6 @@
   }
 }
 
-[transition="in:circle:bottom-right"] {
+[transition-style="in:circle:bottom-right"] {
   animation-name: circle-in-bottom-right;
 }

src/circles/in-center.css

@@ -7,6 +7,6 @@
   }
 }
 
-[transition="in:circle:center"] {
+[transition-style="in:circle:center"] {
   animation-name: circle-in-center;
 }

src/circles/in-hesitate.css

@@ -10,6 +10,6 @@
   }
 }
 
-[transition="in:circle:hesitate"] {
+[transition-style="in:circle:hesitate"] {
   animation-name: circle-in-hesitate;
 }

src/circles/in-top-left.css

@@ -7,6 +7,6 @@
   }
 }
 
-[transition="in:circle:top-left"] {
+[transition-style="in:circle:top-left"] {
   animation-name: circle-in-top-left;
 }

src/circles/in-top-right.css

@@ -7,6 +7,6 @@
   }
 }
 
-[transition="in:circle:top-right"] {
+[transition-style="in:circle:top-right"] {
   animation-name: circle-in-top-right;
 }

src/circles/out-bottom-left.css

@@ -7,7 +7,7 @@
   }
 }
 
-[transition="out:circle:bottom-left"] {
+[transition-style="out:circle:bottom-left"] {
   --transition__duration: 1.5s;
   animation-name: circle-out-bottom-left;
 }

src/circles/out-bottom-right.css

@@ -7,7 +7,7 @@
   }
 }
 
-[transition="out:circle:bottom-right"] {
+[transition-style="out:circle:bottom-right"] {
   --transition__duration: 1.5s;
   animation-name: circle-out-bottom-right;
 }

src/circles/out-center.css

@@ -7,6 +7,6 @@
   }
 }
 
-[transition="out:circle:center"] {
+[transition-style="out:circle:center"] {
   animation-name: circle-out-center;
 }

src/circles/out-hesitate.css

@@ -10,6 +10,6 @@
   }
 }
 
-[transition="out:circle:hesitate"] {
+[transition-style="out:circle:hesitate"] {
   animation-name: circle-out-hesitate;
 }

src/circles/out-top-left.css

@@ -7,7 +7,7 @@
   }
 }
 
-[transition="out:circle:top-left"] {
+[transition-style="out:circle:top-left"] {
   --transition__duration: 1.5s;
   animation-name: circle-out-top-left;
 }

src/circles/out-top-right.css

@@ -7,7 +7,7 @@
   }
 }
 
-[transition="out:circle:top-right"] {
+[transition-style="out:circle:top-right"] {
   --transition__duration: 1.5s;
   animation-name: circle-out-top-right;
 }

src/polygons/diamond-in-center.css

@@ -7,7 +7,7 @@
   }
 }
 
-[transition="in:diamond:center"] {
+[transition-style="in:diamond:center"] {
   --transition__duration: 1.5s;
   animation-name: diamond-in-center;
 }

src/polygons/diamond-in-height-width.css

@@ -10,7 +10,7 @@
   }
 }
 
-[transition="in:diamond:hesitate"] {
+[transition-style="in:diamond:hesitate"] {
   --transition__duration: 1.5s;
   animation-name: diamond-in-double-scale;
 }

src/polygons/diamond-out-center.css

@@ -7,7 +7,7 @@
   }
 }
 
-[transition="out:diamond:center"] {
+[transition-style="out:diamond:center"] {
   --transition__duration: 1.5s;
   animation-name: diamond-out-center;
 }

src/polygons/diamond-out-height-width.css

@@ -10,7 +10,7 @@
   }
 }
 
-[transition="out:diamond:hesitate"] {
+[transition-style="out:diamond:hesitate"] {
   --transition__duration: 1.5s;
   animation-name: diamond-out-double-scale;
 }

src/polygons/opposing-corners-in.css

@@ -7,7 +7,7 @@
   }
 }
 
-[transition="in:polygon:opposing-corners"] {
+[transition-style="in:polygon:opposing-corners"] {
   --transition__duration: 1.5s;
   animation-name: polygon-in-opposing-corners;
 }

src/polygons/opposing-corners-out.css

@@ -7,7 +7,7 @@
   }
 }
 
-[transition="out:polygon:opposing-corners"] {
+[transition-style="out:polygon:opposing-corners"] {
   --transition__duration: 1.5s;
   animation-name: polygon-out-opposing-corners;
 }

src/squares/in-bottom-left.css

@@ -7,6 +7,6 @@
   }
 }
 
-[transition="in:square:bottom-left"] {
+[transition-style="in:square:bottom-left"] {
   animation-name: square-in-bottom-left;
 }

src/squares/in-bottom-right.css

@@ -7,6 +7,6 @@
   }
 }
 
-[transition="in:square:bottom-right"] {
+[transition-style="in:square:bottom-right"] {
   animation-name: square-in-bottom-right;
 }

src/squares/in-center.css

@@ -7,6 +7,6 @@
   }
 }
 
-[transition="in:square:center"] {
+[transition-style="in:square:center"] {
   animation-name: square-in-center;
 }

src/squares/in-hesitate.css

@@ -10,6 +10,6 @@
   }
 }
 
-[transition="in:square:hesitate"] {
+[transition-style="in:square:hesitate"] {
   animation-name: square-in-hesitate;
 }

src/squares/in-top-left.css

@@ -7,6 +7,6 @@
   }
 }
 
-[transition="in:square:top-left"] {
+[transition-style="in:square:top-left"] {
   animation-name: square-in-top-left;
 }

src/squares/in-top-right.css

@@ -7,6 +7,6 @@
   }
 }
 
-[transition="in:square:top-right"] {
+[transition-style="in:square:top-right"] {
   animation-name: square-in-top-right;
 }

src/squares/out-bottom-left.css

@@ -7,7 +7,7 @@
   }
 }
 
-[transition="out:square:bottom-left"] {
+[transition-style="out:square:bottom-left"] {
   --transition__duration: 1.5s;
   animation-name: square-out-bottom-left;
 }

src/squares/out-bottom-right.css

@@ -7,7 +7,7 @@
   }
 }
 
-[transition="out:square:bottom-right"] {
+[transition-style="out:square:bottom-right"] {
   --transition__duration: 1.5s;
   animation-name: square-out-bottom-right;
 }

src/squares/out-center.css

@@ -7,6 +7,6 @@
   }
 }
 
-[transition="out:square:center"] {
+[transition-style="out:square:center"] {
   animation-name: square-out-center;
 }

src/squares/out-hesitate.css

@@ -10,6 +10,6 @@
   }
 }
 
-[transition="out:square:hesitate"] {
+[transition-style="out:square:hesitate"] {
   animation-name: square-out-hesitate;
 }

src/squares/out-top-left.css

@@ -7,7 +7,7 @@
   }
 }
 
-[transition="out:square:top-left"] {
+[transition-style="out:square:top-left"] {
   --transition__duration: 1.5s;
   animation-name: square-out-top-left;
 }

src/squares/out-top-right.css

@@ -7,7 +7,7 @@
   }
 }
 
-[transition="out:square:top-right"] {
+[transition-style="out:square:top-right"] {
   --transition__duration: 1.5s;
   animation-name: square-out-top-right;
 }

src/wipes/in-bottom-left.css

@@ -7,6 +7,6 @@
   }
 }
 
-[transition="in:wipe:bottom-left"] {
+[transition-style="in:wipe:bottom-left"] {
   animation-name: wipe-in-bottom-left;
 }

src/wipes/in-bottom-right.css

@@ -7,6 +7,6 @@
   }
 }
 
-[transition="in:wipe:bottom-right"] {
+[transition-style="in:wipe:bottom-right"] {
   animation-name: wipe-in-bottom-right;
 }

src/wipes/in-bottom.css

@@ -7,7 +7,7 @@
   }
 }
 
-[transition="in:wipe:bottom"],
-[transition="in:wipe:up"] {
+[transition-style="in:wipe:bottom"],
+[transition-style="in:wipe:up"] {
   animation-name: wipe-in-bottom;
 }

src/wipes/in-left.css

@@ -7,6 +7,6 @@
   }
 }
 
-[transition="in:wipe:left"] {
+[transition-style="in:wipe:left"] {
   animation-name: wipe-in-left;
 }