I want to had a delay with a keyframe animation, but it doesn't work.
It's a div with an opacity animation on a click button. The problem is that the opacity is 100% before the animation start.
$('button').click(function() {
if ($(this).hasClass("clicked")) {
$('div').removeClass('In');
$('div').addClass('Out');
$(this).text("Open ↓");
$(this).removeClass("clicked");
} else {
$('div').addClass('In');
$('div').removeClass('Out');
$(this).text("Close ↑");
$(this).addClass("clicked");
}
});
body {
text-align: center
}
div {
display: inline-block;
background: pink;
height: 300px;
width: 300px;
opacity: 0;
}
button {
font-size: 16px;
}
#keyframes In {
0% {
opacity: 0;
height: 0
}
100% {
opacity: 1;
height: 300px
}
}
#keyframes Out {
0% {
opacity: 1;
height: 300px
}
100% {
opacity: 0;
height: 0
}
}
.In {
animation-duration: 800ms;
animation-name: In;
animation-delay: 0.3s;
opacity: 1;
}
.Out {
animation-duration: 800ms;
animation-name: Out;
animation-delay: 0.3s;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Open ↓ </button> <br>
<div> </div>
Here's MY JSFIDDLE with a problem.
Use transition instead of animation and you will also have an easier code:
$('button').click(function() {
if ($(this).hasClass("clicked")) {
$(this).text("Open ↓");
} else {
$(this).text("Close ↑");
}
$('div.box').toggleClass('In');
$(this).toggleClass("clicked");
});
body {
text-align: center
}
div.box {
display: inline-block;
background: pink;
height: 0;
width: 300px;
opacity: 0;
transition: .8s .3s;
}
button {
font-size: 16px;
}
div.In {
opacity: 1;
height: 300px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Open ↓ </button> <br>
<div class="box"> </div>
Considering your code you may correct it like this:
$('button').click(function() {
if ($(this).hasClass("clicked")) {
$('div').removeClass('In');
$('div').addClass('Out');
$(this).text("Open ↓");
$(this).removeClass("clicked");
} else {
$('div').addClass('In');
$('div').removeClass('Out');
$(this).text("Close ↑");
$(this).addClass("clicked");
}
});
body {
text-align: center
}
div {
display: inline-block;
background: pink;
height: 300px;
width: 300px;
opacity: 0;
}
button {
font-size: 16px;
}
#keyframes In {
0% {
opacity: 0;
height: 0
}
100% {
opacity: 1;
height: 300px
}
}
#keyframes Out {
0% {
opacity: 1;
height: 300px
}
100% {
opacity: 0;
height: 0
}
}
.In {
animation-duration: 800ms;
animation-name: In;
animation-delay: 0.3s;
animation-fill-mode:forwards; /*Added this*/
/* opacity:0; removed*/
}
.Out {
animation-duration: 800ms;
animation-name: Out;
animation-delay: 0.3s;
animation-fill-mode:forwards; /*Added this*/
opacity:1;
height:300px; /*Added this*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Open ↓ </button> <br>
<div> </div>
Related
I have an input field with a search Icon inside. When the user clicks inside the input field the Icon fades out to the left, in doing so, it bleeds out of the input box.
Is there a way to prevent the search Icon from bleeding out? I don't want the Icon to be visible past the border of the input box.
cshtml page:
<header>
<nav id="navBar" class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="search-bar center">
<img id="searchIcon" src="https://svgur.com/i/XUB.svg" class="icon search-icon" />
<input id="searchBox" class="input-text" placeholder="Find games for sale" type="text">
</div>
</nav>
</header>
js:
$('#searchBox').on({
focus: function () {
document.getElementById("searchIcon").classList.remove("fadeRightSearchIcon");
document.getElementById("searchIcon").classList.add("fadeLeftSearchIcon");
},
blur: function () {
document.getElementById("searchIcon").classList.remove("fadeLeftSearchIcon");
document.getElementById("searchIcon").classList.add("fadeRightSearchIcon");
}
});
css:
.search-bar {
position: relative;
}
.search-bar.active .input-text {
max-width: 80%;
border: 1px solid #ccc;
background: #eee;
}
.icon {
position: absolute;
top: -2px;
left: 0;
padding: 13px 15px 13px 11px;
}
.search-icon {
width: 50px;
height: auto;
}
.search-bar .input-text {
height: 45px;
padding: 8px 6px 8px 40px;
max-width: 200%;
border-radius: 25px;
outline: none !important;
border: 2px solid;
width: 550px;
transition-property: padding;
transition-duration: 0.5s;
}
.input-text:active, .input-text:focus {
padding: 8px 6px 8px 15px;
}
.fadeLeftSearchIcon {
animation-name: fadeInLeft;
animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
.fadeRightSearchIcon {
animation-name: fadeInRight;
animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
#keyframes fadeInLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-25px);
}
}
#-webkit-keyframes fadeInLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-25px);
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(-25px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(-25px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.center {
margin: 0 auto;
text-align: center;
display: inline-block;
top: 0;
bottom: 0;
}
Try to change to -25% ,check official site:
#keyframes fadeInLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-25%);
}
}
#-webkit-keyframes fadeInLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-25%);
}
}
Result:
Let's say you have 100 buttons on a page and each one should apply a different animation to one specific HTML element. Is there a way to easily define an animation for another element using CSS and if not then setting it via JavaScript?
For example,
#group1 {
display: flex;
flex-direction: row;
}
#group2 {
width: 100px;
height: 100px;
background-color: gray;
animation: animation1 1s ease-out;
}
#keyframes animation1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes animation2 {
0% {
opacity: 0;
background-color: red;
}
100% {
opacity: 1;
background-color: blue;
}
}
#keyframes animation3 {
0% {
opacity: 0;
background-color: purple;
}
100% {
opacity: 1;
background-color: orange;
}
}
<div id="group1">
<button>Animation 1</button>
<button>Animation 2</button>
<button>Animation 3</button>
</div>
<div id="group2">
</div>
When the button is pressed I want the element to use the transition related to it.
Can you define a transition for another element in CSS:
#group2 {
width:100px;
height:100px;
background-color: gray;
}
#button2 {
animation-target: #group2 animation2 1s ease-out;
}
OR
#keyframes #Group2 animation3 {
0% {
opacity: 0;
background-color: purple;
}
100% {
opacity: 1;
background-color: orange;
}
If CSS doesn't handle this, does this look OK for setting it via JavaScript:
function changeAnimation(event) {
var target = event.currentTarget;
var animation = getComputedStyle(target).getPropertyValue("--animation");
var group2 = document.getElementById("group2");
group2.style.setProperty("animation", animation);
console.log("animation:" + animation);
}
function hide() {
var group2 = document.getElementById("group2");
group2.style.setProperty("display", "none");
}
function show() {
var group2 = document.getElementById("group2");
group2.style.setProperty("display", "block");
}
#group1 {
display: flex;
flex-direction: row;
}
#group2 {
width: 100px;
height: 100px;
background-color: gray;
animation: animation1 1s ease-out;
}
#button1 {
--animation: animation1 1s ease-out;
}
#button2 {
--animation: animation2 1s ease-out;
}
#button3 {
--animation: animation3 1s ease-out;
}
#keyframes animation1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes animation2 {
0% {
opacity: 0;
background-color: red;
}
100% {
opacity: 1;
background-color: blue;
}
}
#keyframes animation3 {
0% {
opacity: 0;
background-color: purple;
}
100% {
opacity: 1;
background-color: orange;
}
}
<div id="group1">
<button id="button1" onclick="changeAnimation(event)">Animation 1</button>
<button id="button2" onclick="changeAnimation(event)">Animation 2</button>
<button id="button3" onclick="changeAnimation(event)">Animation 3</button>
<button id="hide" onclick="hide()">Hide</button>
<button id="hide" onclick="show()">Show</button>
</div>
<div id="group2">
</div>
Consider the label/input trick combined with the ~ selector in case you are free to edit the HTML code
#group1 {
display: flex;
flex-direction: row;
}
#group2 {
width: 100px;
height: 100px;
background-color: gray;
animation:none 1s ease-out
}
#anim1:checked ~ #group2 {
animation-name: animation1;
}
#anim2:checked ~ #group2 {
animation-name: animation2;
}
#anim3:checked ~ #group2 {
animation-name: animation3;
}
label {
-webkit-appearance:button;
-moz-appearance:button;
padding:5px;
}
input{
display:none;
}
#keyframes animation1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes animation2 {
0% {
opacity: 0;
background-color: red;
}
100% {
opacity: 1;
background-color: blue;
}
}
#keyframes animation3 {
0% {
opacity: 0;
background-color: purple;
}
100% {
opacity: 1;
background-color: orange;
}
}
<div id="group1">
<label for="anim1" >Animation 1</label>
<label for="anim2" >Animation 2</label>
<label for="anim3" >Animation 3</label>
</div>
<input id="anim1" type="radio" name="anim">
<input id="anim2" type="radio" name="anim">
<input id="anim3" type="radio" name="anim">
<div id="group2">
</div>
You can use CSS varibales to set the animation property and change the value using
setProperty()
var group2 = document.getElementById('group2');
function changeAnimation(e) {
group2.style.setProperty('--anim', `animation${e.id}`);
}
:root {
--anim: animation1;
}
#group1 {
display: flex;
flex-direction: row;
}
#group2 {
width: 100px;
height: 100px;
background-color: gray;
animation: var(--anim) 1s ease-out;
}
#keyframes animation1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes animation2 {
0% {
opacity: 0;
background-color: red;
}
100% {
opacity: 1;
background-color: blue;
}
}
#keyframes animation3 {
0% {
opacity: 0;
background-color: purple;
}
100% {
opacity: 1;
background-color: orange;
}
}
<div id="group1">
<button id="1" onclick="changeAnimation(this)">Animation 1</button>
<button id="2" onclick="changeAnimation(this)">Animation 2</button>
<button id="3" onclick="changeAnimation(this)">Animation 3</button>
</div>
<div id="group2">
</div>
This is the css code of the fade in animation
.searchbar {
opacity: 0;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
I want that a searchbar fades in when I scroll down (after 700px) and when I scroll up (so its less than 700px) it fades out
this is the script in js
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 700) {
$(".searchbar").addClass("animated_fi fadeIn");
} else {
$(".searchbar").removeClass("animated_fi fadeIn");
}
});
If I'm understanding your query correctly. You're after something like this:
$(window).scroll(function(e) {
if ($(this).scrollTop() > 300) { // choose the value you want.
$('#menu:hidden').slideDown();
} else {
$('#menu:visible').slideUp();
}
});
body {
height: 2000px;
margin: 0;
background-color: black;
}
#menu {
background: white;
color: black;
padding: 1em;
width: 100%;
display: none;
position: fixed;
top: 0;
}
h1 {
font-family: 'Lato', sans-serif;
}
.search-container {
width: 490px;
display: block;
margin: 0 auto;
}
input#search-bar {
margin: 0 auto;
width: 100%;
height: 45px;
padding: 0 20px;
font-size: 1rem;
border: 1px solid #d0cfce;
outline: none;
}
input#search-bar:focus {
border: 1px solid #008abf;
transition: 0.35s ease;
color: #008abf;
}
input#search-bar:focus::-webkit-input-placeholder {
transition: opacity 0.45s ease;
opacity: 0;
}
input#search-bar:focus::-moz-placeholder {
transition: opacity 0.45s ease;
opacity: 0;
}
input#search-bar:focus:-ms-placeholder {
transition: opacity 0.45s ease;
opacity: 0;
}
.search-icon {
position: relative;
float: right;
width: 75px;
height: 75px;
top: -62px;
right: -45px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="menu">
<center>
<h1>Hello</h1>
</center>
<form class="search-container">
<input type="text" id="search-bar" placeholder="What can I help you with today?">
<img class="search-icon" src="http://www.endlessicons.com/wp-content/uploads/2012/12/search-icon.png">
</form>
</div>
<center>
<div>
<h1 style="color: white;">Scroll Down</h1>
</div>
</center>
</body>
This will fade a search bar in when the user scrolls, and then fade out when they scroll back. If you want the effect to take place at 700px just change the JQuery 300 -> 700.
The goal is to have the text transition to 3 different words. I want them to be in sync with the animated rings(text change after every two rings animate fading in and fading out) I'm not sure what is the best way to set the timing for the rings and the text - should this be done with javascript or CSS animation keyframes? Below is a link to my codepen and HTML/CSS.
Codepen - https://codepen.io/pizzapgh/pen/RygPQJ
body {
background-color: gray;
}
#circles {
width: 1000px;
height: 1000px;
display: inline-block;
position: relative;
margin: auto;
border: 1px solid blue;
}
#circles div {
position: absolute;
border-radius: 50%;
border: 4px solid rgba(255, 255, 255, 0.5);
width: 0;
height: 0;
opacity: 0;
animation-name: growCircles;
animation-duration: 8s;
transition-timing-function: ease-out;
animation-iteration-count: infinite;
}
#circles div:nth-child(1) {
animation-delay: 0s;
}
#circles div:nth-child(2) {
animation-delay: 1s;
}
#circles div:nth-child(3) {
animation-delay: 2s;
}
#circles div:nth-child(4) {
animation-delay: 3s;
}
#circles div:nth-child(5) {
animation-delay: 4s;
}
#circles div:nth-child(6) {
animation-delay: 5s;
}
#keyframes growCircles {
0% {
top: 500px;
left: 500px;
}
20% {
opacity: 0.5;
}
80% {
opacity: 0;
top: 0;
left: 0;
width: 1000px;
height: 1000px;
}
100% {
opacity: 0;
}
}
/*================================
Text Transition
================================== */
#spin:after {
content: "";
animation: spin 5s ease-in infinite;
}
#keyframes spin {
0% {
content: "From The Classroom";
}
60% {
content: "To the City";
}
100% {
content: "To the World";
}
}
h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 6;
color: white;
width: 500px;
overflow: hidden;
text-align: center;
font-family: 'RockwellMT' !important;
}
<div class="circle-container">
<div id="circles">
<h2 id="spin"></h2>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
I was wondering if it is possible to assign a group of stacking texts in the middle of the page? placing them in the center wasn't too difficult, but the problem was that they are positioned left, right, top, and bottom, which I think means they need to be given: position:absolute. Furthermore, the .headline texts are given fade-in(opacity 0 to 100) and animation commands. In terms of scaling, the texts are responsive, and get smaller as the window gets smaller. In addition they are assigned their own z-index.
In the image below, I have laid out the overall structure I would like to achieve, but I'm experiencing a lot of difficulty doing so because of the text behaviors I want to accomplish.
For functionality reference, here is a jsfiddle.
Please help me and thank you in advance! Please note that I would prefer to use CSS only since it's a simple function that only occurs once upon page load. However, if this is a issue that only javascript can solve, please let me know :)
.animated {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
-ms-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.fade {
-webkit-animation-name: fade;
-moz-animation-name: fade;
-o-animation-name: fade;
animation-name: fade;
}
#-webkit-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes flowright {
0% {
opacity: 0;
left: -100px;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes flowright {
0% {
opacity: 0;
left: -100px;
}
100% {
opacity: 1;
left: 0;
}
}
#-webkit-keyframes flowleft {
0% {
opacity: 0;
right: -100px;
}
100% {
opacity: 1;
right: 0;
}
}
#keyframes flowleft {
0% {
opacity: 0;
right: -100px;
}
100% {
opacity: 1;
right: 0;
}
}
#-webkit-keyframes flowup {
0% {
opacity: 0;
margin-top: 100px;
}
100% {
opacity: 1;
margin-top: 0;
}
}
#keyframes flowup {
0% {
opacity: 0;
margin-top: 100px;
}
100% {
opacity: 1;
margin-top: 0;
}
}
#-webkit-keyframes flowdown {
0% {
opacity: 0;
margin-top: -100px;
}
100% {
opacity: 1;
margin-top: 0;
}
}
#keyframes flowdown {
0% {
opacity: 0;
margin-top: -100px;
}
100% {
opacity: 1;
margin-top: 0;
}
}
.flow {
display: inline-block;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
-webkit-animation-direction: alternate;
-webkit-animation-fill-mode: both;
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.right {
-webkit-animation-name: flowright;
animation-name: flowright;
}
.left {
-webkit-animation-name: flowleft;
animation-name: flowleft;
}
.up {
-webkit-animation-name: flowup;
animation-name: flowup;
}
.down {
-webkit-animation-name: flowdown;
animation-name: flowdown;
}
.sequence01 {
-webkit-animation-delay: 0.1s;
}
.sequence02 {
-webkit-animation-delay: 0.2s;
}
.sequence03 {
-webkit-animation-delay: 0.3s;
}
.sequence04 {
-webkit-animation-delay: 0.4s;
}
/* Headline Typography */
.headline {
font-family: helvetica;
font-weight: bold;
font-size: 4em;
}
/* Rows */
.row01, .row02, .row03 {
clear: both;
}
.row01 {
left:20%;
top: 0;
position: relative;
}
.row02 {
right:10%;
top: 50%;
position: relative;
}
.row03 {
left:10%;
top: 100%;
position: relative;
}
/* General Structure */
body {
width: 100%;
height: 100%;
}
.pagewrap {
height: 100%;
width: 80%;
max-width: 48em;
margin: 0 auto;
background-color: #fff6d6;
}
<body>
<div class="pagewrap">
<div class="headline">
<div class="row01 flow left sequence01">ROW 01</div>
<br/>
<div class="row02 flow right sequence02">ROW 02</div>
<br/>
<div class="row03 flow up sequence03">ROW 03</div>
</div>
</div>
</body>
The solution given by adeneo in the comments may work perfectly fine, but since your layout is strictly vertical, why not just use a block layout instead of inline-block or floats?
fiddle here.
You mention a "padding" percentage between the rows as well. Note that margin and padding css attributes as percentages will key off of the width not the height. I placed divs to solve that, but there are other solutions.
Edit
If the headline needs to be vertically centered to the page, here's a nifty way to do it using the "ghost element technique":
/* Headline Typography */
.wrapper {
position: relative;
height: 100%;
width: 100%;
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.wrapper:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.headline {
display: inline-block;
width: 100%;
vertical-align: middle;
font-family: helvetica;
font-weight: bold;
font-size: 4em;
}
fiddle
I learned of it here.