public marks

PUBLIC MARKS from decembre with tags css & animation


CSS - DEMO - Button Switches with Checkboxes and CSS3 Fanciness

Button Switches with Checkboxes and CSS3 Fanciness Realistic-looking, css-only UI elements

JAVASCRIPT / CSS - DEMO - Scrolling Letters Animation | Codrops

A switching title effect where a fixed text element changes with an animation depending on the scroll position.The animations are powered by anime anime.js. We also use imagesLoaded for preloading the images and Charming.js for the handling the letter structure of the titles.

JAVASCRIPT - LIBRAIRY - GitHub - juliangarnier/anime: JavaScript Animation Engine

Anime (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects. Main features Keyframes: Chain multiple animation properties. Timeline: Synchronize multiple instances together. Playback controls: Play, pause, restart, seek animations or timelines. CSS transforms: Animate CSS transforms individually. Function based values: Multiple animated targets can have individual value. SVG Animations: Motion path, line drawing and morphing animations. Easing functions: Use the built in functions or create your own Cubic Bézier curve easing.



CSS - ANIMATION - iHover Hover Effects powered by pure CSS3

iHover is an impressive hover effects collection, powered by pure CSS3, no dependency, work well with Bootstrap 3!

CSS - ONLINE Tool - Bounce.js

Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations.


CSS 3D Folding Animation

Demo : Mouseover the blocks below to see the folding animation! use : transition-property: height; transition-duration: 1s; perspective: 1000px; transform-style: preserve-3d; transition-duration: 1s; transform: rotateX(-90deg); transform-origin: top;

CSS - ANIMATION (transition-timing-function) - Pure CSS Slide Up and Slide Down Example

Click the button below to toggle the pure CSS slider! : /* slider in open state */ .slider { overflow-y: hidden; max-height: 500px; /* approximate max height */ transition-property: all; transition-duration: .5s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); } /* close it with the "closed" class */ .slider.closed { max-height: 0; } A clever use of max-height allows the element to grow and shrink as needed.