Workshop 18: CSS Animations & cool effects

Front End Workshops
CSS Animations & cool effects
Toni Camí & Jorge López
jlopez@visual-engin.com
tcami@visual-engin.com

CSS Transitions allows property changes in
CSS properties to occur smoothly over a
specified duration.

Transition-duration: Specifies the duration over which transitions should occur. You
can specify a single duration that applies to all properties during the transition, or
multiple values to allow each property to transition over a different period of time.
Transition-property: Specifies the name or names of the CSS properties to which
transitions should be applied.
Transition-delay: Defines how long to wait between the time a property is changed
and the transition actually begins.
Transition-timing-function: Specifies a function to define how intermediate values
for properties are computed. Timing functions determine how intermediate values of
the transition are calculated. Most timing functions can be specified by providing the
graph of the corresponding function, as defined by four points defining a cubic bezier.
Easyng website

CSS Transform property allow you to visually
manipulate an element by skewing, rotating,
translating or scaling.

scale: affects the size of the element. This also applies to the font-size, padding,
height, and width of an element, too.
skewX and skewY: tilts an element to the left or right, like turning a triangle into a
parallelogram. There is no shorthand skew property.
translate: moves an element sideways or up and down.
rotate: rotates the element clockwise from its current position.
Transformations-properties CSS

CSS animations make it possible to animate
transitions from one CSS style configuration to
another.
Animations consist of two components, a style describing the CSS animation and a set
of keyframes that indicate the start and end states of the animation's style, as well as
possible intermediate waypoints.
Advantages:
1. No JS is required.
2. Animations run well, rendering…
3. The browser optimize performance and efficiency. For example, reducing
the update frequency of animations running in tabs that aren't currently visible.

animation-delay
Configures the delay between the time the element is loaded and the beginning of the
animation sequence.
animation-direction
Configures whether or not the animation should alternate direction on each run
through the sequence or reset to the start point and repeat itself.
animation-duration
Configures the length of time that an animation should take to complete one cycle.
animation-iteration-count
Configures the number of times the animation should repeat; you can specify infinite
to repeat the animation indefinitely.
animation-name
Specifies the name of the @keyframes at-rule describing the animation's keyframes.

animation-play-state
Lets you pause and resume the animation sequence.
animation-timing-function
Configures the timing of the animation; that is, how the animation transitions through
keyframes, by establishing acceleration curves.
animation-fill-mode
Configures what values are applied by the animation before and after it is executing.
Animation-properties CSS

Keyframes are used to specify the values for
the animating properties at various points
during the animation.
@keyframes identifier (which will be referenced using animation-name:
identifier) {
CSS style rules
}

● Keyframes use a <percentage> to indicate the time during the animation sequence
at which they take place.
● 0% Start / 100% End.
● These two times are so important, they have special aliases: from and to.
● No negative
● No higher than 100%;
● You can optionally include additional keyframes that describe intermediate steps
between the start and end of the animation.

.trigger {
position: relative;
background: #444;
width: 120px;
height: 120px;
border: none;
border-radius: 50%;
/* img replace */
overflow: hidden;
text-indent: 100%;
color: transparent;
white-space: nowrap;
cursor: pointer;
}
.trigger span,
.trigger span::before,
.trigger span::after {
position: absolute;
width: 44px;
height: 4px;
background: white;
border-radius: 4px;
}
.trigger span {
top: calc(50% - 2px);
left: calc(50% - 22px);
transition: transform .3s;
}
.trigger span::before,
content: '';
left: 0;
transition: transform .3s, width .3s;
}
.trigger span::before {
bottom: 12px;
}
top: 12px;
}
.trigger:hover span {
transform: rotate(180deg);
}
.trigger:hover span::before {
width: 50%;
transform: translateX(-2px) translateY(5px)
rotate(-45deg);
}
.trigger:hover span::after {
width: 50%;
transform: translateX(-2px) translateY(-5
px) rotate(45deg);
}

Example
http://dev2.slicejack.com/fullscreen-video-demo/index.html
<div class="fullscreen-bg">
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
<source src="video/big_buck_bunny.webm" type="video/webm">
<source src="video/big_buck_bunny.mp4" type="video/mp4">
<source src="video/big_buck_bunny.ogv" type="video/ogg">
</video>
</div>

.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (min-aspect-ratio: 16/9) {
height: 300%;
top: -100%;
}
}
@media (max-aspect-ratio: 16/9) {
width: 300%;
left: -100%;
}
}
@media (max-width: 767px) {
.fullscreen-bg {
background: url('../img/videoframe.jpg')
center center / cover no-repeat;
}
display: none;
}
}
CSS

Speed, movement & position.
Elements behavior depends on the scroll.
You can add to Backgrounds, divs or sprites.
ONLY CSS
WITH JS
Example
http://jonathannicol.com/projects/parallax-scrolling/
Example download

<section id="home" data-type="background" data-speed="10" class="pages">
<article>I am absolute positioned</article>
</section>
<section id="about" data-type="background" data-speed="10" class="pages">
<article>Simple Parallax Scroll</article>
</section>
#about {
background: url(about-bg.jpg) 50% 0 repeat fixed; min-height:
1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#about article {
height: 458px;
position: absolute;
text-align: center;
top: 150px;
width: 100%;
}
#home {
background: url(home-bg.jpg) 50% 0 repeat fixed; min-height:
1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
}
#home article {
height: 458px;
position: absolute;
text-align: center;
top: 150px;
width: 100%;
}

CSS
#parallax-bg3 {
z-index: 3;
position: fixed;
left: 50%; /* align left edge with center of viewport */
top: 0;
width: 940px;
margin-left: -470px; /* move left by half element's width */
}
#bg3-1 {
position: absolute;
top: -111px;
left: 355px;
}
#bg3-2 {
position: absolute;
top: 812px;
left: 321px;
}
JAVASCRIPT
function parallaxScroll(){
var scrolled = $(window).scrollTop();
$('#parallax-bg1').css('top',(0-(scrolled*.25))+'px');
}

http://www.minimamente.com/example/magic_animations/
http://ianlunn.github.io/Hover/#effects
http://daneden.github.io/animate.css/
http://h5bp.github.io/Effeckt.css/

- Example 2 Loaders: http://callmenick.com/_development/css-loaders-and-
spinners-2/
- Slack-CSS-Logo-master -> http://callmenick.com/_development/slack-
logo/
Un curso interesante para iniciarse en Animaciones con CSS:
https://codyhouse.co/course/mastering-css-transitions-transformations-
animations/

Workshop 18: CSS Animations & cool effects

Recommended

More Related Content

What's hot (19)

Similar to Workshop 18: CSS Animations & cool effects (20)

More from Visual Engineering (20)

Recently uploaded (20)

Workshop 18: CSS Animations & cool effects