Skip to content

Instantly share code, notes, and snippets.

View Jack-McCourt's full-sized avatar

Jack-McCourt

4 followers · 2 following
View GitHub Profile
@Jack-McCourt
Jack-McCourt / CSS Animation - Scale
Created January 7, 2018 02:50
@keyframes example {
0% {
transform: scale(0.2);
}
70%{
transform: scale(1.5);
}
100% {
transform: scale(1);
}
@Jack-McCourt
Jack-McCourt / CSS Animation - Transform X and Y
Last active January 7, 2018 02:39
@keyframes example {
0% {
transform: translate(-100px, -100px);
}
70%{
transform: translate(500px, 500px);
}
100% {
transform: translate(400px, 400px);
}
@Jack-McCourt
Jack-McCourt / CSS Animation - Movement
Last active January 7, 2018 03:11
@keyframes example {
0% {
transform: translateX(-100px);
}
50%{
transform: translateX(500px);
}
100% {
transform: translateX(400px);
}
@Jack-McCourt
Jack-McCourt / CSS Animation - Animation Bounce
Created January 7, 2018 02:11
@keyframes example {
0% {width:100px;}
75% {width:400px;}
100% {width:300px;}
}
@Jack-McCourt
Jack-McCourt / CSS Animation - Simple Keyframe Width
Created January 7, 2018 02:00
@keyframes example {
0% {width:100px;}
100% {width:300px;}
}
.box {
width: 100px;
height: 100px;
background-color: red;
@Jack-McCourt
Jack-McCourt / CSS Animation - Transition Delay
Created January 7, 2018 01:48
transition-delay: 2s;
@Jack-McCourt
Jack-McCourt / CSS Animation - Multiple Transition Properties
Created January 7, 2018 01:36
-webkit-transition: width 2s, height 4s; /* Safari */
transition: width 2s, height 4s;
@Jack-McCourt
Jack-McCourt / CSS Animation - Transitions HTML
Created January 7, 2018 01:35
<div class="box"></div>
@Jack-McCourt
Jack-McCourt / CSS Animation - Transitions CSS
Created January 7, 2018 01:33
.box {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
.box:hover {
width:300px;
@Jack-McCourt
Jack-McCourt / 004HTML - CSS Link
Created December 21, 2017 18:49