-
Notifications
You must be signed in to change notification settings - Fork 90
/
css-carousel.css
32 lines (29 loc) · 2.44 KB
/
css-carousel.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/*!
* inuitcss, by @csswizardry
*
* github.com/inuitcss | inuitcss.com
*/.carousel{overflow:hidden;width:100%;text-align:center;font-weight:300;content-visibility:auto}.carousel__panes{margin:0;padding:0;list-style:none;position:relative;display:table;width:500%;overflow:hidden;-webkit-filter:blur(0);-moz-filter:blur(0);filter:blur(0);-webkit-animation:carousel 45s alternate infinite cubic-bezier(0.6, 0, 0.14, 1);-moz-animation:carousel 45s alternate infinite cubic-bezier(0.6, 0, 0.14, 1);animation:carousel 45s alternate infinite cubic-bezier(0.6, 0, 0.14, 1)}.carousel__panes:hover{-webkit-animation-play-state:paused;-moz-animation-play-state:paused;animation-play-state:paused}.carousel__pane{position:relative;display:table-cell;vertical-align:middle;width:20%}.carousel__link{color:inherit;border-bottom:1px solid #ddd;font-weight:300;-webkit-transition:0.2s border-color;-moz-transition:0.2s border-color;transition:0.2s border-color}.carousel__link:hover,.carousel__link:active,.carousel__link:focus{text-decoration:none;border-bottom-color:#c4c4c4}@-webkit-keyframes carousel{0%,
17.5%{-webkit-transform:translate3d(0, 0, 0);-webkit-filter:blur(0)}20.625%,
38.125%{-webkit-transform:translate3d(-20%, 0, 0);-webkit-filter:blur(0)}41.25%,
58.75%{-webkit-transform:translate3d(-40%, 0, 0);-webkit-filter:blur(0)}61.875%,
79.375%{-webkit-transform:translate3d(-60%, 0, 0);-webkit-filter:blur(0)}82.5%,
100%{-webkit-transform:translate3d(-80%, 0, 0);-webkit-filter:blur(0)}19.0625%,
39.6875%,
60.3125%,
80.9375%{-webkit-filter:blur(2px)}}@-moz-keyframes carousel{0%,
17.5%{-moz-transform:translate3d(0, 0, 0);-moz-filter:blur(0)}20.625%,
38.125%{-moz-transform:translate3d(-20%, 0, 0);-moz-filter:blur(0)}41.25%,
58.75%{-moz-transform:translate3d(-40%, 0, 0);-moz-filter:blur(0)}61.875%,
79.375%{-moz-transform:translate3d(-60%, 0, 0);-moz-filter:blur(0)}82.5%,
100%{-moz-transform:translate3d(-80%, 0, 0);-moz-filter:blur(0)}19.0625%,
39.6875%,
60.3125%,
80.9375%{-moz-filter:blur(2px)}}@keyframes carousel{0%,
17.5%{transform:translate3d(0, 0, 0);filter:blur(0)}20.625%,
38.125%{transform:translate3d(-20%, 0, 0);filter:blur(0)}41.25%,
58.75%{transform:translate3d(-40%, 0, 0);filter:blur(0)}61.875%,
79.375%{transform:translate3d(-60%, 0, 0);filter:blur(0)}82.5%,
100%{transform:translate3d(-80%, 0, 0);filter:blur(0)}19.0625%,
39.6875%,
60.3125%,
80.9375%{filter:blur(2px)}}