recentpopularlog in

piperh : transition   61

CSSFX - Beautifully simple click-to-copy CSS effects
collection of copyable hover and button effects. Not essential, some feeble, but could be handy for quick copy and paste
webdesign  web  design  hover  effect  css  transform  transition 
10 weeks ago by piperh
How to Create and Animate Rotated Overlays | Codrops
A tutorial on how to create and animate rotated overlays, or "reveal" elements, for interesting page transition effects.
webdesign  web  design  reveal  hide  transition  page  effect  rotate  overlay  animated 
11 weeks ago by piperh
Using CSS Clip Path to Create Interactive Effects, Part II | CSS-Tricks
transition effects using svg clip path. Support better than css clip path, says author.
webdesign  web  design  clip-path  clip  path  svg  css  effect  transition  clipping 
september 2018 by piperh
Icon Transition Generator
online tool to generate code for a transition between two svg icons. Uses js
webdesign  web  design  icon  transition  svg  vector  animation  animate  morph  tool  online 
september 2018 by piperh
UI composition & animation in pure HTML | layerJS
interesting library for constructing pages and transitions, using frames and layers
webdesign  web  design  transition  js  javascript  script  frame  layer  effect  animation  animate  ui  ux  pattern  library 
july 2018 by piperh
CSS Techniques and Effects for Knockout Text | CSS-Tricks
words are clipped out of an element and reveal the background
webdesign  web  design  css  text  type  effect  knockout  overlay  blend  pierce  multiply  transition  mask 
march 2018 by piperh
Slice Revealer | Codrops
nice reveal effects on images, using slices that uncover image in animated way
webdesign  web  design  animate  animation  effect  reveal  slices  css  transition 
march 2018 by piperh
eases - graph - clickable
codepen demo of many different bezier easings. I couldn't see a way to copy the actual numbers, but there are small graphic representations of the curves.
webdesign  web  design  bezier  ease  curve  easing  animation  css  transition  examples 
january 2018 by piperh
CSS Transitions and Transforms for Beginners
simple outline of properties with embedded codepen demos
webdesign  web  design  css  transition  transform 
january 2018 by piperh
CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More | CSS-Tricks
shows some fairly complicated transitions. Says transforms more performant than transitions
webdesign  web  design  css  animation  transition  transform 
january 2018 by piperh
CSS grid meets Bauhaus
interesting underline effect for links
webdesign  web  design  css  hover  link  effect  transition  animation 
january 2018 by piperh
Effeckt.css
library of css animations for buttons, modals, scrolls, nav, transitions, captions, tooltips, tabs. Useful, if the code is good. They claim to be performant, no janks
webdesign  web  design  css  transition  animation  effect  tab  button  slide  fade  modal 
november 2017 by piperh
Create Element Transitions with Vue.js by Christopher Murphy on CodePen
a js library for transitions. The case explained here is absurd - you can do the same with css only. But maybe vue.js has a use in more complex cases
webdesign  web  design  js  javascript  script  vue  transition  css  state  transform  effect 
may 2017 by piperh
Site 5 Transition » Site5 Migration Updates and Notifications
Site5 has been bought by Endurance. This page is about their transition to other servers.
web  hosting  host  site5  transition  transfer 
march 2017 by piperh
Jorge C. S. Cardoso on CodePen
codepen tutorials on jquery basics, also tutorials on css transitions, although when you click a title nothing happens - needs investigating
webdesign  web  design  script  jquery  learn  tutorial  basics  demos  css  transition  animation 
february 2017 by piperh
CSSPIN - CSS Spinners and Loaders
some pre-coded css spinning and loading effects for shapes
webdesign  web  design  spinner  loader  css  effect  animation  transition 
december 2016 by piperh
Transition or Animation: Which One Should You Use? > Similarities Between Transitions and Animations
useful explanation of the difference between css animation and transition. tip: transition is simpler, a to b, and always needs a trigger, eg hover, (though that trigger could also be javascript). Animation allows stages via keyframes.
webdesign  web  design  css  transition  animation  keyframe  transform 
december 2016 by piperh
CSS-only Sliding Panels using transforms
css-only sliding panels. Haven't studied this closely but initially I don't understand the css - why use :before ?
At StaE the images were incredibly slow to load, so was difficult to understand purpose of effect
webdesign  web  design  css  css-only  sliding  panel  transition  slide  transform 
november 2016 by piperh
Animated CSS Underline Hover Examples
css-only animated underline. Rather neat, no js, but on touch screen (iOS, haven't tried Android) makes links require 2 taps - don't know why.
This is copied to a html page on my disc - see code samples
webdesign  web  design  css  html  underline  effect  transition  css-only  animated  hover 
november 2016 by piperh
10 principles for smooth web animations
article about keeping animations smooth. One important principle is:
"Don’t change any properties besides opacity or transform" and so avoid browser page layout recalculations for each frame of a transition
webdesign  web  design  animation  animate  transition 
november 2016 by piperh
All you need to know about CSS Transitions
article from 2013 about css transitions - useful to see which properties can be animated
webdesign  web  design  transition  css  animation  animate 
november 2016 by piperh
CSS3 Animations
w3schools reference page for css animation. Lets you try different combinations. July 2016: only prefixes webkit - maybe moz and o not necessary any more
webdesign  web  design  animation  animate  transition  css  reference 
july 2016 by piperh
Animated Transition Effects in CSS and jQuery | CodyHouse
library of about 10 css animation effects.A couple of possibles but several feeble, too
webdesign  web  design  css  animation  animate  effect  transition  code  library 
may 2016 by piperh
Colourful Flower Popup Menu
nice fancy pop out 'flower' menu using css transitions.
webdesign  web  design  popup  css  menu  circle  transform  transition 
march 2016 by piperh
22 Essential CSS Recipes
article showing some great uses of css. Not all supported by all modern browsers but worth rereading now and again
webdesign  web  design  css  html  blend  mode  gradient  transition  z-index  currentColor  object-fit  checkbox  radio  button  counter  shadow  @supports  position  sticky  vw  vh  scroll 
january 2016 by piperh
CSS Transitions
reference list showing which css properties are animatable
webdesign  web  design  reference  css  animatable  transition  animation  definition  property  animate 
november 2015 by piperh
daneden/animate.css · GitHub
nice premade libraries of code for css animations and transitions. Could save time though unused styles would create some bloat. Looks v easy to use - just install their css and add their classes as you like.
webdesign  web  design  css  animate  transform  transition  library  snippets  code  coding  effects 
october 2015 by piperh
The CSS Transitions Cheatsheet | kirupa.com
handy quick reference page of css transitions and transforms
webdesign  web  design  webdev  code  coding  reference  css  transition  transform  cheatsheet  howto  animation 
august 2015 by piperh
Sequence.js - The responsive CSS animation framework
They say: For creating sliders, presentations, banners, and other step-based applications. Nice actions and v smooth (though I don't understand why they say "for step-based applications"). You can control the transitions with your own css.
webdesign  web  design  gallery  slideshow  carousel  animation  swipe  touch  responsive  transition  js  transform  css 
august 2015 by piperh
Hover.css - A collection of CSS3 powered hover effects
some nice effects, some naff. they don't all work very well on touch screen - check before using any of these
webdesign  web  design  hover  effect  css  button  link  transition 
june 2015 by piperh
Responsive & Fixed One Page Nav
very nice js functionality for show/hide menu and one-page navigation. the icon transform is css only though the toggle clss needs script. No jQuery needed or other external dependency.
webdesign  web  design  vanilla  js  javascript  navigation  nav  responsive  menu  icon  hamburger  X  transform  transition  css  html 
may 2015 by piperh
Designers: Start Coding With uilang - Smashing Magazine
good article explaining use of uilang.js, but also showing good css effects of transition and transform. Some very nice stuff
webdesign  web  design  javascript  uilang  ui  js  code  coding  generator  css  transition  transform  effects  webdev  development  tutorial  howto 
february 2015 by piperh
slidr.js - add some slide effects.
no dependencies. Slides can be any html, inline, inline-block, block
webdesign  web  design  js  javascript  carousel  slideshow  slide  transition 
january 2015 by piperh
Sticky Captions Concept
possible for Mary's site, instead of current sliding code (which isn't touch-screen friendly)
webdesign  web  design  effect  slide  sliding  caption  transition  touch  screen  touchscreen  animation 
october 2014 by piperh
transition-timing-function - CSS | MDN
mozilla reference page showing possible values for transition-timing
css  transform  transition  timing  function  effect  values  reference  mozilla  html5  html 
july 2014 by piperh
CSS Transitions
David Walsh demonstrating, naff demos but handy to see the syntax
css3  transition  code  coding  syntax  property  declaration 
march 2014 by piperh

Copy this bookmark:





to read