Develop Reference

Scale a button when user hovers over it

The Codepen linked below is where I currently am stuck.
function startHover(e) {
btn.classList.add("btnPlaying")
}
function removeHover(e) {
btn.classList.remove("btnPlaying");
}
const btn = document.querySelector('.btn')
btn.addEventListener("mouseenter", startHover);
btn.addEventListener('transitionend', removeHover);
.btn {
margin-top: 10rem;
padding: 20px 100px;
background-color: rgb(255, 204, 3);
border-radius: 10px;
border-style: none;
box-shadow: 0px 0px 10px black;
color: blue;
border: 4px solid rgb(53, 106, 188);
transition: all 1.07s ease;
}
.btnPlaying {
transform: scale(1.1);
}
<button class="btn">Play!</button>
https://codepen.io/TerrellsCode/pen/zYEyORB
The button grows and shrinks like intended but only does it one time. Look for any pointers on how to make this grow/shrink animation loop infinitely as long as user is hovering over button. Thank You

No need for JavaScript. With CSS Keyframes you can create and run animations. Toggle the animation-play-state with the :hover selector to start and pause the animation.
#keyframes grow-shrink {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
.btn {
margin-top: 10rem;
padding: 20px 100px;
background-color: rgb(255, 204, 3);
border-radius: 10px;
border-style: none;
box-shadow: 0px 0px 10px black;
color: blue;
border: 4px solid rgb(53, 106, 188);
animation-name: grow-shrink;
animation-duration: 1.07s;
animation-timing-function: ease;
animation-fill-mode: backwards;
animation-direction: alternate;
animation-play-state: paused;
animation-iteration-count: infinite;
}
.btn:hover {
animation-play-state: running;
}
<button class="btn">Play!</button>

You dont need javascript to create such animation, use css keyframes and infinite animation.
.btn {
margin-top: 10rem;
padding: 20px 100px;
background-color: rgb(255,204,3);
border-radius: 10px;
border-style: none;
box-shadow: 0px 0px 10px black;
color: blue;
border: 4px solid rgb(53,106,188);
}
.btn:hover {
animation: btnPlaying 1s infinite;
}
#keyframes btnPlaying {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}

CSS3 Creative Div Box Design | CSS Animation Effects

I was making a CSS box design. when I'm done I saw my website keep moving up and down at below, then I saw my background color had 2 but just a little at the bottom. when I try to delete coding #keyframes animate my website was stopping moving and down. can you help me
here my coding at CSS file
.square {
position: relative;
height: 400px;
width: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.square span:nth-child(1) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgb(228, 43, 73);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate 6s linear infinite;
}
.square:hover span:nth-child(1) {
border: none;
background: rgb(233, 112, 132);
}
.square span:nth-child(2) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgb(228, 43, 73);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate 4s linear infinite;
}
.square:hover span:nth-child(2) {
border: none;
background: rgb(233, 112, 132);
}
.square span:nth-child(3) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgb(228, 43, 73);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate2 10s linear infinite;
}
.square:hover span:nth-child(3) {
border: none;
background: rgb(233, 112, 132);
}
#keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes animate2 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
.content1 {
position: relative;
padding: 40px 60px;
color: black;
text-align: center;
transition: 0.5s;
z-index: 1000;
}
<div class="square">
<span></span>
<span></span>
<span></span>
<div class="content1">
<p>“My friend, Elizabeth Shealy, owns this one room spa and I left her little oasis just this morning. If you have ever spotted a coffee shop off the beaten track or a cafe in an unexpected area, you know the feeling of finding a gem that perhaps no
one else in the city knows about. Elizabeth’s nook is that sort of find. Its as if you’re in another part of the world-it has a different kind of feel.”</p>
</div>
</div>
I hope I can get feedback very soon for my assignment

for your case, best way is to control your width and height and reduce value of them or make a box and use overflow:hidden in parent div because borders that you set absolute position for them, they are bigger from your page.
NOTE:
if you want add more content below this code or you have content above it, use overflow-x:hidden for this div, if it dosen't work, use overflow-x:hidden for your body tag.
sorry for my grammar.
body{
/*overflow-x:hidden*/
}
.square{
position: relative;
height: 400px;
width: 400px;/*if using overflow-x for body set width to 100vw or if use overflow:hidden for .square set width to 400px*/
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.square span:nth-child(1){
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgb(228, 43, 73);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate 6s linear infinite ;
}
.square:hover span:nth-child(1){
border: none;
background: rgb(233, 112, 132);
}
.square span:nth-child(2){
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgb(228, 43, 73);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate 4s linear infinite;
}
.square:hover span:nth-child(2){
border: none;
background: rgb(233, 112, 132);
}
.square span:nth-child(3){
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgb(228, 43, 73);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate2 10s linear infinite;
}
.square:hover span:nth-child(3){
border: none;
background: rgb(233, 112, 132);
}
#keyframes animate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
#keyframes animate2{
0%{
transform: rotate(360deg);
}
100%{
transform: rotate(0deg);
}
}
.content1{
position: relative;
padding: 40px 60px;
color: black;
text-align: center;
transition: 0.5s;
z-index: 1000;
}
<div class="square">
<span></span>
<span></span>
<span></span>
<div class="content1">
<p>“My friend, Elizabeth Shealy, owns this one room spa and I left her little oasis just this morning.
If you have ever spotted a coffee shop off the beaten track or a cafe in an unexpected area, you
know the feeling of finding a gem that perhaps no one else in the city knows about. Elizabeth’s nook is
that sort of find. Its as if you’re in another part of the world-it has a different kind of feel.”</p>
</div>
</div>

Keyframe animation to slide element in from outside the bounds of the parent element

I would like to have a key frame animation where the element slides in from beyond the bounds of it's parent element.
I've been using this to slide an element from left to right:
#keyframes slide-right {
0% {
transform: translateX(-100%);
}
}
But that only slides the element in from 100% to the left of it's final position.
I'd like it to slide in from directly off screen from it's parent element. You can see an example of what I have working here that shows the current behavior (not the desired behavior).
#keyframes slide-right {
0% {
transform: translateX(-100%);
}
}
#Menu {
position: absolute;
display: block;
width: 100px;
height: 105px;
overflow: hidden;
cursor: pointer;
left: 324px;
top: 114px;
animation: 0.3s ease-out 0s 1 normal forwards running slide-right;
}
.Rectangle_491 {
position: absolute;
overflow: visible;
width: 100px;
height: 105px;
left: 0px;
top: 0px;
}
#Rectangle_491 {
fill: rgb(255, 255, 255);
stroke: rgb(112, 112, 112);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 4;
shape-rendering: auto;
}
.main {
position: absolute;
border: 1px solid gray;
height: 300px;
left: 1px;
right: 1px;
}
<div class="main">
<div id="Menu" onclick="application.goBack()" style="display: block; animation: 0.3s ease-out 0s 1 normal forwards running slide-right;">
<svg class="Rectangle_491">
<rect id="Rectangle_491" rx="0" ry="0" x="0" y="0" width="100" height="105">
</rect>
</svg>
</div>
</div>
One idea I have is to find the keyframe style declaration (if possible) and manually set the translateX() position in pixels or percent using the width of the parent element but I'd prefer to see if it's possible in CSS before going to a JavaScript solution.

You may want to try setting .main to overflow: hidden and positioning the #Menu outside of that parent:
#keyframes slide-right {
0% {
transform: translateX(-100%);
}
}
main {
position: relative;
overflow: hidden;
margin: 5pc;
outline: 2px solid lightblue;
height: 100px;
padding: 1pc;
}
div {
width: 100px;
height: 100px;
background-color: #222;
animation: slide-right 0.3s normal forwards running;
position: absolute;
left: 0;
top: 0;
}
<main>
<div></div>
</main>

JS/CSS How to change background color in middle of transform?

So I'm trying to create a flipboard effect for some divs (ie: One side is white, the other is black). And right now I have this:
setInterval(function () {
document.getElementById('test').classList.toggle('flipped')
}, 1000)
#test {
width: 100px;
height: 100px;
border: 1px solid black;
transition: 1s;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
}
.flipped {
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
background: yellow;
}
<div id="test"></div>
But I'm not sure how to have the background stay white, until the rotation is "flat" and then change color. Any ideas?

Simply adjust the transition of the background:
setInterval(function () {
document.getElementById('test').classList.toggle('flipped')
}, 1000)
#test {
width: 100px;
height: 100px;
border: 1px solid black;
transition:
transform 1s linear,
background 0s 0.5s linear; /*change imediately after 0.5s*/
}
.flipped {
transform: rotateX(180deg);
background: yellow;
}
<div id="test"></div>
But better rely on animation than using transtion with JS:
#test {
width: 100px;
height: 100px;
border: 1px solid black;
animation:flip 1s infinite alternate linear;
}
#keyframes flip{
from {
transform: rotateX(0deg);
background:#fff;
}
49.5% {
background:#fff;
}
50% {
transform: rotateX(90deg);
background:yellow;
}
to {
transform: rotateX(180deg);
background:yellow;
}
}
<div id="test"></div>

You can use the below structure for achieving this
setInterval(function () {
document.getElementById('test').classList.toggle('flipped')
}, 1000)
.container {
background-color: transparent;
width: 100px;
height: 100px;
perspective: 1000px;
}
#test {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
#test:before,#test:after {
display:block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
#test:before {
content:"";
border: 1px solid white;
transition: 1s;
background-color: black;
z-index: 2;
}
#test:after {
content:"";
border: 1px solid black;
background-color: white;
transform: rotateY(180deg);
z-index: 1;
}
.flipped {
transform: rotateX(180deg);
}
<div class="container"><div id="test"></div></div>

You can use animation to set the last frame as black;
setInterval(function () {
document.getElementById('test').classList.toggle('flipped')
}, 1000)
#test {
width: 100px;
height: 100px;
border: 1px solid black;
transition: 1s;
}
.flipped {
transform: rotateX(180deg);
animation: changeColor 0.3s 0.7s linear forwards;
}
#keyframes changeColor {
0%, 100%{background:black}
}
<div id="test"></div>

Target checked checkbox in jQuery

I have HTML, CSS and jQuery code for a checkbox. But I was recently making some changes in the HTML structure and now the jQuery is no longer working. And since I'm a beginner, I don't know how to fix this.
Can someone take a look and just let me know what jQuery should be targeting instead, so it'll change the styling of the elements when the checkbox is checked?
$('.form-check').click(function(){
$(this).closest('.list-group-item').find('.incomplete').css('display', (this.checked)?'none':'block')
$(this).closest('.list-group-item').find('.complete').css('display', (this.checked)?'block':'none')
$(this).closest('.list-group-item').css('background-color',(this.checked)?'#4CAF50':'')
$(this).closest('.list-group-item').find('.custom-control-description').css('color', (this.checked)?'#fff':'#2c2b2c')
$(this).closest('.list-group-item').find('.custom-control-description').css('text-decoration-color', (this.checked)?'#fff':'#ababab')
})
.custom-control-box {
border-radius: 50%;
height: 30px;
width: 30px;
background-color: #fff;
border: 1px solid black;
position: absolute;
margin-left: -50px;
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 3;
stroke-miterlimit: 10;
stroke: #1b7e45;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark {
width: 30px;
height: 30px;
border-radius: 50%;
display: block;
stroke-width: 5;
stroke: #fff;
stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px #1b7e45;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
border: 1px solid #4c4c4d;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
#keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
#keyframes scale {
0%,
100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
#keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #1b7e45;
}
}
input[type=checkbox] {
display: none;
}
input[type=checkbox] + svg {
display: none;
}
input[type=checkbox]:checked + svg {
display: block;
}
.form-check {
position: relative;
}
.form-check label {
align-items: center;
justify-content: left;
padding-left: 50px;
cursor: pointer;
}
.custom-control-description {
font-size: 12px;
line-height: 2.6;
}
.form-check label svg {
position: absolute;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<li class="list-group-item p-4 border-top-0 first-group-item">
<div class="form-check mb-0">
<label class="mb-0">
<span class="custom-control-box align-middle"></span>
<input type="checkbox" name="item_1" value="item 1" id="checkbox"/>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
<path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
</svg>
<span class="custom-control-description align-middle">Checkbox</span>
</label>
</div> <!-- /.form-check -->
<div class="ml-auto status">
<p class="mb-0 incomplete">pending</p>
<p class="mb-0 complete">done</p>
</div>
</li>

You are checking the .form-check if it is checked.. It should be the checkbox inside the .form-check.
Find the checkbox inside the .form-check first and the check for its prop if checked or not as follows:
$('.form-check').click(function() {
var checkbox = $(this).find('input[type=checkbox]')
$(this).closest('.list-group-item').find('.incomplete').css('display', (checkbox.prop('checked')) ? 'none' : 'block')
$(this).closest('.list-group-item').find('.complete').css('display', (checkbox.prop('checked')) ? 'block' : 'none')
$(this).closest('.list-group-item').css('background-color', (checkbox.prop('checked')) ? '#4CAF50' : '')
$(this).closest('.list-group-item').find('.custom-control-description').css('color', (checkbox.prop('checked')) ? '#fff' : '#2c2b2c')
$(this).closest('.list-group-item').find('.custom-control-description').css('text-decoration-color', (checkbox.prop('checked')) ? '#fff' : '#ababab')
})
.custom-control-box {
border-radius: 50%;
height: 30px;
width: 30px;
background-color: #fff;
border: 1px solid black;
position: absolute;
margin-left: -50px;
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 3;
stroke-miterlimit: 10;
stroke: #1b7e45;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark {
width: 30px;
height: 30px;
border-radius: 50%;
display: block;
stroke-width: 5;
stroke: #fff;
stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px #1b7e45;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
border: 1px solid #4c4c4d;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
#keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
#keyframes scale {
0%,
100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
#keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #1b7e45;
}
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+svg {
display: none;
}
input[type=checkbox]:checked+svg {
display: block;
}
.form-check {
position: relative;
}
.form-check label {
align-items: center;
justify-content: left;
padding-left: 50px;
cursor: pointer;
}
.custom-control-description {
font-size: 12px;
line-height: 2.6;
}
.form-check label svg {
position: absolute;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<li class="list-group-item p-4 border-top-0 first-group-item">
<div class="form-check mb-0">
<label class="mb-0">
<span class="custom-control-box align-middle"></span>
<input type="checkbox" name="item_1" value="item 1" id="checkbox"/>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
<path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
</svg>
<span class="custom-control-description align-middle">Checkbox</span>
</label>
</div>
<!-- /.form-check -->
<div class="ml-auto status">
<p class="mb-0 incomplete">pending</p>
<p class="mb-0 complete">done</p>
</div>
</li>

The problem is with your this.isChecked, it is always undefined, so it always evaluates to false. I replaced it with isChecked, getting the value from the checked property of the checkbox belonging to this li item.
$('.form-check').click(function(){
var isChecked = $(this).find('#checkbox').prop('checked');
$(this).closest('.list-group-item').find('.incomplete').css('display', isChecked?'none':'block')
$(this).closest('.list-group-item').find('.complete').css('display', isChecked?'block':'none')
$(this).closest('.list-group-item').css('background-color',isChecked?'#4CAF50':'')
$(this).closest('.list-group-item').find('.custom-control-description').css('color', isChecked?'#fff':'#2c2b2c')
$(this).closest('.list-group-item').find('.custom-control-description').css('text-decoration-color', isChecked?'#fff':'#ababab')
})
.custom-control-box {
border-radius: 50%;
height: 30px;
width: 30px;
background-color: #fff;
border: 1px solid black;
position: absolute;
margin-left: -50px;
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 3;
stroke-miterlimit: 10;
stroke: #1b7e45;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark {
width: 30px;
height: 30px;
border-radius: 50%;
display: block;
stroke-width: 5;
stroke: #fff;
stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px #1b7e45;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
border: 1px solid #4c4c4d;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
#keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
#keyframes scale {
0%,
100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
#keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #1b7e45;
}
}
input[type=checkbox] {
display: none;
}
input[type=checkbox] + svg {
display: none;
}
input[type=checkbox]:checked + svg {
display: block;
}
.form-check {
position: relative;
}
.form-check label {
align-items: center;
justify-content: left;
padding-left: 50px;
cursor: pointer;
}
.custom-control-description {
font-size: 12px;
line-height: 2.6;
}
.form-check label svg {
position: absolute;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<li class="list-group-item p-4 border-top-0 first-group-item">
<div class="form-check mb-0">
<label class="mb-0">
<span class="custom-control-box align-middle"></span>
<input type="checkbox" name="item_1" value="item 1" id="checkbox"/>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
<path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
</svg>
<span class="custom-control-description align-middle">Checkbox</span>
</label>
</div> <!-- /.form-check -->
<div class="ml-auto status">
<p class="mb-0 incomplete">pending</p>
<p class="mb-0 complete">done</p>
</div>
</li>