├── LICENSE ├── README.md └── anims.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Filament Group 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | :warning: This project is archived and the repository is no longer maintained. 2 | 3 | # anims 4 | 5 | Just some CSS utilities for build and loop animations. 6 | 7 | ![demo of animation css in effect at filamentgroup.com](https://user-images.githubusercontent.com/214783/93365193-7d661600-f817-11ea-9ba7-fbf261d6961b.gif) 8 | 9 | [See anims css in effect at filamentgroup.com](https://www.filamentgroup.com) 10 | 11 | ## Basic usage: 12 | 13 | Add the `move` class and an animation class to animate an element in. Override timing and animation defaults in CSS, or inline via the style attribute. 14 | 15 | Here is a paragraph animating into view, vertically from below for 1 second: 16 | ```html 17 |

...

18 | ``` 19 | 20 | By default, all animations start by fading in from 0 opacity to 1. Even looping or repeating animations will fade in when they start. This effect works well for build animations that introduce an element on the page. 21 | If you don't want the element to fade in, set `--fadeDuration: 0;` on it via CSS. 22 | 23 | ## animation classes: 24 | - `moveX`: move vertically (100% of element width is default distance. Override with `--distance` var) 25 | - `moveY`: move vertically (100% of element height is default distance. Override with `--distance` var) 26 | - `moveRotate`: rotate element from center. Positive numbers are clockwise. (15deg is default rotation. Override with `--rotation` var) 27 | - `moveXY`: move x and y at once. Override with `--distance` and `--distanceX` vars 28 | - `moveScale`: scale from an amt to 1. Default is to start at 1.4 scale. Override with `--scale` var. 29 | 30 | Note: The transform origin is `transform-origin: 50% 50%;`, the center point, for rotations, but if you're animating svg elements, that center point refers to the center of the whole svg rather than the element itself. You can set `transform-origin` to a location in the svg graphic where you need it to accommodate this difference. 31 | 32 | ## options available to set via css on the element (default values shown): 33 | 34 | ```css 35 | --duration: 1s; /* duration of the move or rotate animation */ 36 | --delay: 0; /* delay before all animations begin */ 37 | --easing: ease-in-out; /* easing to use for the move or rotate animation */ 38 | --fadeDuration: 2s; /* duration of the fade-in */ 39 | --fadeDelay: var(--delay); / duration of the */ 40 | --iteration: 1; /* how many times the move or rotate animation should run. if it's infinite, use a repeat class below */ 41 | --direction: alternate; /* when repeating, should it go back and forth or "normal". if infinite, use a repeat class below */ 42 | --playstate: running; /* change to paused to pause */ 43 | ``` 44 | 45 | ## animation repeat classes: 46 | - `moveRepeat`: repeat animation infinitely from the start (good for spinning) 47 | - `moveLoop`: repeat animation infinitely back and forth (good for pendulum) 48 | 49 | ## Built-in Support for Prefers-reduced-motion 50 | 51 | If a user has set their preferences to prefer reduce motion, these animations will disable. If you rely on transition or animation events, you might want to override these to have an extremely short duration instead of merely disabling them. 52 | 53 | ## examples 54 | 55 | [quick codepen]https://codepen.io/scottjehl/pen/OJNwedM) 56 | 57 | 58 | paragraph sliding back and forth 25px horizontally: 59 | ```html 60 |

...

61 | ``` 62 | 63 | div rotating endlessly: 64 | ```html 65 |

...

66 | ``` 67 | 68 | 69 | svg rotating back and forth infinitely: 70 | ```svg 71 | ... 72 | ``` 73 | -------------------------------------------------------------------------------- /anims.css: -------------------------------------------------------------------------------- 1 | /* anims css - Just some CSS utilities for build and loop animations. 2 | MIT @scottjehl, @filamentgroup */ 3 | 4 | @keyframes moveY { 5 | 0% { transform: translateY(var(--distance)); } 6 | 100% { transform: translateY(0); } 7 | } 8 | @keyframes moveX { 9 | 0% { transform: translateX(var(--distance)); } 10 | 100% { transform: translateX(0); } 11 | } 12 | @keyframes moveXY { 13 | 0% { transform: translateY(var(--distance)) translateX(var(--distanceX)); } 14 | 100% { transform: translateY(0) translateX(0); } 15 | } 16 | @keyframes rotate { 17 | 0% { transform: rotate(var(--rotation)); } 18 | 100% { transform: rotate(0deg); } 19 | } 20 | @keyframes scale { 21 | 0% { transform: scale(var(--scale)); } 22 | 100% { transform: scale(1); } 23 | } 24 | @keyframes fade { 25 | 0% { opacity: 0; } 26 | 100% { opacity: 1; } 27 | } 28 | .move { 29 | --duration: 1s; 30 | --delay: 0s; 31 | --easing: ease-in-out; 32 | --fadeDuration: 2s; 33 | --fadeDelay: var(--delay) ; 34 | --iteration: 1; 35 | --direction: alternate; 36 | --playstate: running; 37 | transform-origin: 50% 50%; 38 | } 39 | .moveX { 40 | --distance: 100%; 41 | animation: moveX var(--duration) var(--delay) var(--iteration) var(--easing) both var(--direction), 42 | fade var(--fadeDuration) var(--fadeDelay) 1 both var( --playstate); 43 | } 44 | .moveY { 45 | --distance: 100%; 46 | animation: moveY var(--duration) var(--delay) var(--iteration) var(--easing) both var(--direction), 47 | fade var(--fadeDuration) var(--fadeDelay) 1 both var( --playstate); 48 | } 49 | .moveXY { 50 | --distance: 100%; 51 | --distanceX: 100%; 52 | animation: moveXY var(--duration) var(--delay) var(--iteration) var(--easing) both var(--direction), 53 | fade var(--fadeDuration) var(--fadeDelay) 1 both var( --playstate); 54 | } 55 | .moveRotate { 56 | --rotation: -15deg; 57 | animation: rotate var(--duration) var(--delay) var(--iteration) var(--easing) both var(--direction), 58 | fade var(--fadeDuration) var(--fadeDelay) 1 both var( --playstate); 59 | } 60 | .moveScale { 61 | --scale: 1.4; 62 | animation: scale var(--duration) var(--delay) var(--iteration) var(--easing) both var(--direction), 63 | fade var(--fadeDuration) var(--fadeDelay) 1 both var( --playstate); 64 | } 65 | .moveLoop { 66 | --iteration: infinite; 67 | --direction: alternate; 68 | } 69 | .moveRepeat { 70 | --iteration: infinite; 71 | --direction: normal; 72 | --easing: linear; 73 | } 74 | .movePaused { 75 | --playstate: running; 76 | } 77 | @media (prefers-reduced-motion: reduce) { 78 | .move { 79 | animation: none !important; 80 | transition: none !important; 81 | } 82 | } 83 | --------------------------------------------------------------------------------