mirror of
https://github.com/jgthms/bulma
synced 2026-03-19 11:54:30 -07:00
Finish animations
This commit is contained in:
Jeremy Thomas
@@ -4,34 +4,88 @@
|
||||
to
|
||||
transform: scale(1)
|
||||
|
||||
@keyframes bdSlideDown
|
||||
from
|
||||
opacity: 0
|
||||
transform: translateY(-1rem)
|
||||
to
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes bdSlideUp
|
||||
from
|
||||
opacity: 0
|
||||
transform: translateY(1rem)
|
||||
to
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
$cubic-dramatic: cubic-bezier(0, 0.75, 0.25, 1)
|
||||
$cubic-less-dramatic: cubic-bezier(0.14, 0.71, 0.29, 0.86)
|
||||
$cubic-magic: cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
|
||||
$duration: 500ms
|
||||
$delay: 250ms
|
||||
$wait: 500ms
|
||||
|
||||
%bd-focus-animation
|
||||
animation-duration: 500ms
|
||||
animation-fill-mode: both
|
||||
animation-timing-function: $cubic-less-dramatic
|
||||
transform-origin: center center
|
||||
|
||||
.bd-focus-mobile,
|
||||
.bd-focus-tablet,
|
||||
.bd-focus-desktop
|
||||
$delay-subtitle: $delay / 2
|
||||
|
||||
// Titles
|
||||
.bd-focus-item
|
||||
.title
|
||||
@extend %bd-focus-animation
|
||||
animation-duration: $duration
|
||||
animation-name: bdSlideDown
|
||||
.subtitle
|
||||
@extend %bd-focus-animation
|
||||
animation-duration: $duration
|
||||
animation-name: bdSlideUp
|
||||
&:nth-child(1)
|
||||
.subtitle
|
||||
animation-delay: $delay-subtitle
|
||||
&:nth-child(2)
|
||||
.title
|
||||
animation-delay: $wait
|
||||
.subtitle
|
||||
animation-delay: $wait + $delay-subtitle
|
||||
&:nth-child(3)
|
||||
.title
|
||||
animation-delay: ($wait * 2)
|
||||
.subtitle
|
||||
animation-delay: ($wait * 2) + $delay-subtitle
|
||||
&:nth-child(4)
|
||||
.title
|
||||
animation-delay: ($wait * 3)
|
||||
.subtitle
|
||||
animation-delay: ($wait * 3) + $delay-subtitle
|
||||
|
||||
// Devices
|
||||
%bd-focus-animation-device
|
||||
@extend %bd-focus-animation
|
||||
animation-duration: $duration
|
||||
animation-name: bdGrow
|
||||
transform-origin: bottom center
|
||||
|
||||
.bd-focus-mobile
|
||||
@extend %bd-focus-animation-device
|
||||
|
||||
.bd-focus-tablet
|
||||
@extend %bd-focus-animation-device
|
||||
animation-delay: $delay
|
||||
|
||||
.bd-focus-desktop
|
||||
@extend %bd-focus-animation-device
|
||||
animation-delay: $delay * 2
|
||||
|
||||
// Cubes
|
||||
$cube-factor: 10px
|
||||
|
||||
@keyframes moveCube1
|
||||
@keyframes bdCube1
|
||||
0%
|
||||
transform: translate3d(0, (-5 * $cube-factor), 0)
|
||||
opacity: 0
|
||||
@@ -39,7 +93,7 @@ $cube-factor: 10px
|
||||
transform: translate3d(0, 0, 0)
|
||||
opacity: 1
|
||||
|
||||
@keyframes moveCube2
|
||||
@keyframes bdCube2
|
||||
0%
|
||||
transform: translate3d((-4 * $cube-factor), (3 * $cube-factor), 0)
|
||||
opacity: 0
|
||||
@@ -47,7 +101,7 @@ $cube-factor: 10px
|
||||
transform: translate3d(0, 0, 0)
|
||||
opacity: 1
|
||||
|
||||
@keyframes moveCube3
|
||||
@keyframes bdCube3
|
||||
0%
|
||||
transform: translate3d((4 * $cube-factor), (3 * $cube-factor), 0)
|
||||
opacity: 0
|
||||
@@ -57,74 +111,98 @@ $cube-factor: 10px
|
||||
|
||||
%bd-focus-animation-cube
|
||||
@extend %bd-focus-animation
|
||||
animation-iteration-count: infinite
|
||||
animation-direction: alternate
|
||||
animation-duration: 2000ms
|
||||
animation-duration: $duration * 4
|
||||
animation-iteration-count: infinite
|
||||
|
||||
.bd-focus-cube-1
|
||||
@extend %bd-focus-animation-cube
|
||||
animation-name: moveCube1
|
||||
animation-delay: $wait
|
||||
animation-name: bdCube1
|
||||
|
||||
.bd-focus-cube-2
|
||||
@extend %bd-focus-animation-cube
|
||||
animation-name: moveCube2
|
||||
animation-delay: $delay
|
||||
animation-name: bdCube2
|
||||
animation-delay: $wait + $delay
|
||||
|
||||
.bd-focus-cube-3
|
||||
@extend %bd-focus-animation-cube
|
||||
animation-name: moveCube3
|
||||
animation-delay: $delay * 2
|
||||
animation-name: bdCube3
|
||||
animation-delay: $wait + ($delay * 2)
|
||||
|
||||
@keyframes bdJellyGrow
|
||||
@keyframes fadeIn
|
||||
from
|
||||
opacity: 0
|
||||
transform: scale(0)
|
||||
to
|
||||
opacity: 1
|
||||
transform: scale(1)
|
||||
|
||||
.bd-focus-css3
|
||||
@extend %bd-focus-animation
|
||||
animation-delay: $wait * 2
|
||||
animation-duration: $duration
|
||||
animation-name: fadeIn
|
||||
|
||||
.bd-focus-github
|
||||
@extend %bd-focus-animation
|
||||
animation-delay: $wait * 3
|
||||
animation-duration: $duration * 3
|
||||
animation-name: bdJellyPop
|
||||
|
||||
@keyframes bdJellyPop
|
||||
0%
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
opacity: 0
|
||||
transform: matrix3d(0.1, 0, 0, 0, 0, 0.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
3.4%
|
||||
transform: matrix3d(1.013, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
opacity: 1
|
||||
transform: matrix3d(0.384, 0, 0, 0, 0, 0.466, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
4.7%
|
||||
transform: matrix3d(1.018, 0, 0, 0, 0, 1.024, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
transform: matrix3d(0.505, 0, 0, 0, 0, 0.639, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
6.81%
|
||||
transform: matrix3d(1.026, 0, 0, 0, 0, 1.036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
transform: matrix3d(0.693, 0, 0, 0, 0, 0.904, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
9.41%
|
||||
transform: matrix3d(1.035, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
transform: matrix3d(0.895, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
10.21%
|
||||
transform: matrix3d(1.038, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
transform: matrix3d(0.947, 0, 0, 0, 0, 1.204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
13.61%
|
||||
transform: matrix3d(1.045, 0, 0, 0, 0, 1.053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
transform: matrix3d(1.111, 0, 0, 0, 0, 1.299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
14.11%
|
||||
transform: matrix3d(1.046, 0, 0, 0, 0, 1.053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
transform: matrix3d(1.127, 0, 0, 0, 0, 1.298, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
17.52%
|
||||
transform: matrix3d(1.048, 0, 0, 0, 0, 1.05, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
transform: matrix3d(1.187, 0, 0, 0, 0, 1.216, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
18.72%
|
||||
transform: matrix3d(1.048, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
transform: matrix3d(1.191, 0, 0, 0, 0, 1.169, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
21.32%
|
||||
transform: matrix3d(1.048, 0, 0, 0, 0, 1.043, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
transform: matrix3d(1.177, 0, 0, 0, 0, 1.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
24.32%
|
||||
transform: matrix3d(1.046, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
transform: matrix3d(1.135, 0, 0, 0, 0, 0.964, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
25.23%
|
||||
transform: matrix3d(1.045, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
transform: matrix3d(1.121, 0, 0, 0, 0, 0.944, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
29.03%
|
||||
transform: matrix3d(1.043, 0, 0, 0, 0, 1.036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
transform: matrix3d(1.057, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
29.93%
|
||||
transform: matrix3d(1.042, 0, 0, 0, 0, 1.036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
transform: matrix3d(1.043, 0, 0, 0, 0, 0.909, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
35.54%
|
||||
transform: matrix3d(1.039, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
transform: matrix3d(0.981, 0, 0, 0, 0, 0.966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
36.74%
|
||||
transform: matrix3d(1.039, 0, 0, 0, 0, 1.039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
transform: matrix3d(0.974, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
41.04%
|
||||
transform: matrix3d(1.038, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
transform: matrix3d(0.965, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
44.44%
|
||||
transform: matrix3d(1.039, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
transform: matrix3d(0.969, 0, 0, 0, 0, 1.029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
52.15%
|
||||
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
transform: matrix3d(0.992, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
59.86%
|
||||
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
transform: matrix3d(1.005, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
63.26%
|
||||
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
transform: matrix3d(1.007, 0, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
75.28%
|
||||
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
85.49%
|
||||
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
90.69%
|
||||
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
100%
|
||||
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
opacity: 1
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
|
||||
@@ -142,19 +142,53 @@
|
||||
.bd-focus-item
|
||||
border-radius: $radius-large
|
||||
padding-top: 1.25rem
|
||||
transition-duration: $speed * 2
|
||||
transition-property: background-color
|
||||
position: relative
|
||||
.title a,
|
||||
.subtitle
|
||||
color: $grey-light
|
||||
strong
|
||||
color: currentColor
|
||||
.title
|
||||
transition-duration: $speed * 2
|
||||
transition-property: color
|
||||
&:hover
|
||||
.title
|
||||
position: relative
|
||||
transition-duration: $speed * 2
|
||||
transition-property: color
|
||||
.subtitle
|
||||
color: $grey-light
|
||||
position: relative
|
||||
strong
|
||||
color: currentColor
|
||||
&::before
|
||||
+overlay
|
||||
background-color: $white-bis
|
||||
border-radius: $radius-large
|
||||
content: ""
|
||||
display: block
|
||||
opacity: 0
|
||||
pointer-events: none
|
||||
transform: scale(1.1)
|
||||
transform-origin: center
|
||||
transition-duration: $speed * 2
|
||||
transition-property: opacity, transform
|
||||
&:hover
|
||||
&::before
|
||||
opacity: 1
|
||||
transform: scale(1)
|
||||
.subtitle
|
||||
color: $text
|
||||
&:nth-child(1):hover
|
||||
.title
|
||||
color: $orange
|
||||
&:nth-child(2):hover
|
||||
.title
|
||||
color: $success
|
||||
&:nth-child(3):hover
|
||||
.title
|
||||
color: $link
|
||||
&:nth-child(4):hover
|
||||
.title
|
||||
color: $black
|
||||
|
||||
.bd-focus-icon
|
||||
position: relative
|
||||
|
||||
.bd-focus-mobile
|
||||
color: $purple
|
||||
@@ -172,6 +206,7 @@
|
||||
position: relative
|
||||
height: 3rem
|
||||
margin: 0 auto
|
||||
top: -0.5rem
|
||||
width: 3rem
|
||||
|
||||
.bd-focus-cube
|
||||
|
||||
Reference in New Issue
Block a user