me/portfolio
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Animate cookie notice with jQuery instead of CSS

Browse Source
This commit is contained in:
Matthew Grove
2018-11-17 17:40:06 +00:00
parent 1d42732926
commit ca346b5202
2 changed files with 4 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
assets/global.css
View File

@@ -75,95 +75,3 @@ body {
color: #--mdc-theme-secondary;
text-decoration: none;
}
#cookies.display {
display: block;
/* Cross browser animation */
-webkit-animation: cookies 1s 1; /* Chrome, Safari 5+ */
-moz-animation: cookies 1s 1; /* Firefox 5-15 */
-ms-animation: cookies 1s 1; /* IE9 */
-o-animation: cookies 1s 1; /* Opera 12.00 */
animation: cookies 1s 1; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
}
@keyframes cookies {
0% {
opacity: 0;
-webkit-transform: translate3d(0,100px,0); /* Safari & Chrome */
-moz-transform: translate3d(0,100px,0); /* Firefox */
-ms-transform: translate3d(0,100px,0); /* IE9 */
-o-transform: translate3d(0,100px,0); /* Opera */
transform: translate3d(0,100px,0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0,0,0); /* Safari & Chrome */
-moz-transform: translate3d(0,0,0); /* Firefox */
-ms-transform: translate3d(0,0,0); /* IE9 */
-o-transform: translate3d(0,0,0); /* Opera */
transform: translate3d(0,0,0);
}
}
@-webkit-keyframes cookies {
0% {
-webkit-transform: translate3d(0,100px,0); /* Safari & Chrome */
-moz-transform: translate3d(0,100px,0); /* Firefox */
-ms-transform: translate3d(0,100px,0); /* IE9 */
-o-transform: translate3d(0,100px,0); /* Opera */
transform: translate3d(0,100px,0);
}
100% {
-webkit-transform: translate3d(0,0,0); /* Safari & Chrome */
-moz-transform: translate3d(0,0,0); /* Firefox */
-ms-transform: translate3d(0,0,0); /* IE9 */
-o-transform: translate3d(0,0,0); /* Opera */
transform: translate3d(0,0,0);
}
}
@-moz-keyframes cookies {
0% {
-webkit-transform: translate3d(0,100px,0); /* Safari & Chrome */
-moz-transform: translate3d(0,100px,0); /* Firefox */
-ms-transform: translate3d(0,100px,0); /* IE9 */
-o-transform: translate3d(0,100px,0); /* Opera */
transform: translate3d(0,100px,0);
}
100% {
-webkit-transform: translate3d(0,0,0); /* Safari & Chrome */
-moz-transform: translate3d(0,0,0); /* Firefox */
-ms-transform: translate3d(0,0,0); /* IE9 */
-o-transform: translate3d(0,0,0); /* Opera */
transform: translate3d(0,0,0);
}
}
@-o-keyframes cookies {
0% {
-webkit-transform: translate3d(0,100px,0); /* Safari & Chrome */
-moz-transform: translate3d(0,100px,0); /* Firefox */
-ms-transform: translate3d(0,100px,0); /* IE9 */
-o-transform: translate3d(0,100px,0); /* Opera */
transform: translate3d(0,100px,0);
}
100% {
-webkit-transform: translate3d(0,0,0); /* Safari & Chrome */
-moz-transform: translate3d(0,0,0); /* Firefox */
-ms-transform: translate3d(0,0,0); /* IE9 */
-o-transform: translate3d(0,0,0); /* Opera */
transform: translate3d(0,0,0);
}
}
.close-cookies {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-webkit-transform: translate3d(0,100px,0); /* Safari & Chrome */
-moz-transform: translate3d(0,100px,0); /* Firefox */
-ms-transform: translate3d(0,100px,0); /* IE9 */
-o-transform: translate3d(0,100px,0); /* Opera */
transform: translate3d(0,100px,0);
}