My Custom CSS Loader
.LoaderWrap {
width:100%;
margin-top:25px;
box-sizing:border-box;
}
.sampleContainer {
float:left;
height: 40px;
width: 100%;
margin:10px 10px 20px 10px;
box-sizing:border-box;
}
.loader,
.loader.Large {
position:absolute;
left:50%;
box-sizing:border-box;
}
.dot,
.loader.Large .dot {
display: inline-block;
margin-top:20px;
width: 8px;
height: 8px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius: 4px;
background: #888;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
}
.loader.Large .dot {
width: 24px;
height: 24px;
-webkit-border-radius:12px;
-moz-border-radius:12px;
border-radius: 12px;
}
/** Large Dots **/
.loader.Large .dot_1 {
animation: LargeDot1 1.5s linear infinite;
left:38px;
}
#keyframes LargeDot1 {
0% { transform: rotate(0deg) translateX(-38px); }
25% { transform: rotate(180deg) translateX(-38px); }
75% { transform: rotate(180deg) translateX(-38px); }
100% { transform: rotate(360deg) translateX(-38px); }
}
.loader.Large .dot_2 {
left:76px;
animation: LargeDot2 1.5s linear infinite;
animation-delay: 0.5s;
}
#keyframes LargeDot2 {
0% { transform: rotate(0deg) translateX(-38px); }
25% { transform: rotate(-180deg) translateX(-38px); }
75% { transform: rotate(-180deg) translateX(-38px); }
100% { transform: rotate(-360deg) translateX(-38px); }
}
.loader.Large .dot_3 {
left:38px;
animation: LargeDot3 1.5s linear infinite;
}
#keyframes LargeDot3 {
0% { transform: rotate(0deg) translateX(38px); }
25% { transform: rotate(180deg) translateX(38px); }
75% { transform: rotate(180deg) translateX(38px); }
100% { transform: rotate(360deg) translateX(38px); }
}
.loader.Large .dot_4 {
left:76px;
animation: LargeDot4 1.5s linear infinite;
animation-delay: 0.5s;
}
#keyframes LargeDot4 {
0% { transform: rotate(0deg) translateX(38px); }
25% { transform: rotate(-180deg) translateX(38px); }
75% { transform: rotate(-180deg) translateX(38px); }
100% { transform: rotate(-360deg) translateX(38px); }
}
<div class="LoaderWrap clearfix">
<div class="loader Large">
<span class="dot dot_1"></span>
<span class="dot dot_2"></span>
<span class="dot dot_3"></span>
<span class="dot dot_4"></span>
</div>
</div>
So What's Wrong?
Nothing is 'wrong' as such, feel free to use this loader by all means! However I would like to make this more interesting, turn the dots into stars for example and maybe even go one step further by having the dots (circles) transform into different shapes.
As much as I love CSS and consider myself to be an expert, animating CSS is fairly new to me whereas this is the first CSS animation I have made and I want to make this more unique and crazy for the theme of the website I am working on, not to say that I don't love this loader and asking for, call it improving my skills?, means people will also use, but nevertheless, it is a learning path!
Minimal Question:
How can I have myh dots (circles) as starts OR have my dots (circles) tranform into different shapes, whether it is transforming from basic squares to circles or whatnot using pure CSS and/or JS/jQuery?
Related
I have a CSS animation for a group of spans that make out a word. I am having trouble getting them to work properly. It seems on page load or refresh, they don't work. They only work after I manually save my project file.
Here is the CSS:
.word {
margin: 2rem;
}
.word span {
cursor: pointer;
display: inline-block;
font-size: 4vw;
user-select: none;
line-height: 0.8;
animation-iteration-count: 1;
}
.word span:nth-child(1).active {
animation: balance 1.5s ease-out;
transform-origin: bottom left;
}
#keyframes balance {
0%,
100% {
transform: rotate(100deg);
}
30%,
60% {
transform: rotate(-45deg);
}
}
.word span:nth-child(2).active {
animation: shrinkjump 1s ease-in-out;
transform-origin: bottom center;
}
#keyframes shrinkjump {
10%,
35% {
transform: scale(2, 0.2) translate(0, 0);
}
45%,
50% {
transform: scale(1) translate(0, -150px);
}
80% {
transform: scale(1) translate(0, 0);
}
}
.word span:nth-child(3).active {
animation: falling 2s ease-out;
transform-origin: bottom center;
}
#keyframes falling {
12% {
transform: rotateX(240deg);
}
24% {
transform: rotateX(150deg);
}
36% {
transform: rotateX(200deg);
}
48% {
transform: rotateX(175deg);
}
60%,
85% {
transform: rotateX(180deg);
}
100% {
transform: rotateX(0deg);
}
}
.word span:nth-child(4).active {
animation: rotate 1s ease-out;
}
#keyframes rotate {
20%,
80% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(360deg);
}
}
.word span:nth-child(5).active {
animation: shrinkjump 1s ease-in-out;
transform-origin: bottom center;
}
.word span:nth-child(6).active {
animation: falling 2s ease-out;
transform-origin: bottom center;
}
.word span:nth-child(7).active {
animation: toplong 1.5s linear;
}
.word span:nth-child(8).active {
animation: balance 1.5s ease-out;
transform-origin: top left;
}
#keyframes toplong {
10%,
40% {
transform: translateY(-48vh) scaleY(1);
}
90% {
transform: translateY(-48vh) scaleY(4);
}
}
And here is the JavaScript to change the className:
const spans = document.querySelectorAll(".word span");
spans.forEach((span, idx) => {
span.addEventListener("click", (e) => {
e.target.classList.add("active");
});
span.addEventListener("animationend", (e) => {
e.target.classList.remove("active");
});
});
Does anyone have any idea why the css is behaving this way? I have experimented with a timeout and with the JavaScript to udpate the className. Thanks!
Fiddle : https://jsfiddle.net/7p9uv16b/
I have few blocks rotated with different angles at start. I want to translate them along the rotated axis, on click. But the translation animation reset the rotation angle. I know that I can chain transformation to rotate + translate, but I need multiple animations for that (one per block). Do CSS provides a way to keep the current state as reference for new transformation ?
Html:
<button type="button" onclick="move()">
Animate blocks
</button>
<button type="button" onclick="reset()">
Reset
</button>
<div id="s1" class="square">
</div>
<div id="s2" class="square">
</div>
CSS:
.square{
height: 50px;
width: 50px;
background-color: #58ACFA;
margin: 100px;
}
.move{
-webkit-animation: move 2s both;
animation: move 2s both;
}
#-webkit-keyframes move {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
}
#keyframes move {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
}
Javascript:
$('#s1').css('transform','rotate(45deg)');
$('#s2').css('transform','rotate(30deg)');
function move(){
$('.square').addClass('move');
}
function reset(){
$('.square').removeClass('move');
}
You can use CSS variables.
.square {
--position: 0px;
--angle: 0deg;
-webkit-transform: translateX(var(--position)) rotate(var(--angle));
transform: translateX(var(--position)) rotate(var(--angle));
}
#s1 {
--angle: 45deg;
}
#s2 {
--angle: 30deg;
}
#keyframes move {
0% {
--position: 0px;
}
100% {
--position: 100px;
}
}
I have the following code:
/*Vertical Flip*/
.verticalFlip {
display: inline;
}
.verticalFlip span {
animation: vertical 12.5s linear infinite 0s;
-ms-animation: vertical 12.5s linear infinite 0s;
-webkit-animation: vertical 12.5s linear infinite 0s;
color: #ea1534;
opacity: 0;
overflow: hidden;
position: absolute;
}
.verticalFlip span:nth-child(2) {
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.verticalFlip span:nth-child(3) {
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.verticalFlip span:nth-child(4) {
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.verticalFlip span:nth-child(5) {
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*Vertical Flip Animation*/
#-moz-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-moz-transform: rotateX(180deg);
}
10% {
opacity: 1;
-moz-transform: translateY(0px);
}
25% {
opacity: 1;
-moz-transform: translateY(0px);
}
30% {
opacity: 0;
-moz-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-webkit-transform: rotateX(180deg);
}
10% {
opacity: 1;
-webkit-transform: translateY(0px);
}
25% {
opacity: 1;
-webkit-transform: translateY(0px);
}
30% {
opacity: 0;
-webkit-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-ms-transform: rotateX(180deg);
}
10% {
opacity: 1;
-ms-transform: translateY(0px);
}
25% {
opacity: 1;
-ms-transform: translateY(0px);
}
30% {
opacity: 0;
-ms-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* text */
#hero h1 {
margin: 0;
font-size: 64px;
font-weight: 700;
line-height: 56px;
color: rgb(1, 16, 231);
color: white;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<section id="hero">
<h1 style="margin-bottom: 16px">Sample
<div class="verticalflip"><span>Change</span><span>Text</span></h1>
</section>
I would like the text to be Sample Change and the Change alternates to Text. Right now, the text is not alternating and its on a new line whereas I would like it to be all on one line and the Sample text does not change (remains constant) but there should be a vertical flip word change on the Change and it should alternate between Text. How can I accomplish this?
This is where I got the code from: https://codepen.io/kaceyatstandcreative/pen/PowbpKm
First, there are some errors in your code:
In HTML, you're missing the </div>.
Typo at class="verticalflip" should be verticalFlip as indicated in your css
Multiple color properties in a single css #hero h1 block
After fixing those errors, your animation doesn't appear because the -webkit-text-fill-color: transparent; removes any text color. You should change it into color: transparent; in your case.
Updated:
change text to background image
remove delay between text by remove other span dependencies.
/*Vertical Flip*/
.verticalFlip {
display: inline;
}
.verticalFlip span {
animation: vertical 4s linear infinite;
-ms-animation: vertical 4s linear infinite;
-webkit-animation: vertical 4s linear infinite;
opacity: 0;
overflow: hidden;
position: absolute;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
background-position: 15% 20%;
}
.verticalFlip span:nth-child(2) {
animation-delay: 2s;
-ms-animation-delay: 2s;
-webkit-animation-delay: 2s;
}
/*Vertical Flip Animation*/
#-moz-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-moz-transform: rotateX(180deg);
}
10% {
opacity: 1;
-moz-transform: translateY(0px);
}
50% {
opacity: 1;
-moz-transform: translateY(0px);
}
70% {
opacity: 0;
-moz-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-webkit-transform: rotateX(180deg);
}
10% {
opacity: 1;
-webkit-transform: translateY(0px);
}
50% {
opacity: 1;
-webkit-transform: translateY(0px);
}
70% {
opacity: 0;
-webkit-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-ms-transform: rotateX(180deg);
}
10% {
opacity: 1;
-ms-transform: translateY(0px);
}
50% {
opacity: 1;
-ms-transform: translateY(0px);
}
70% {
opacity: 0;
-ms-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* text */
#hero h1 {
margin: 0;
font-size: 64px;
font-weight: 700;
line-height: 56px;
color: transparent;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
}
<section id="hero">
<h1 style="margin-bottom: 16px">Sample
<div class="verticalFlip"><span>Change</span><span>Text</span></div></h1>
</section>
You had some broken HTML, so I fixed that. Also replaced the spans with div because transform: rotate only works with block elements, not inline elements like span.
I animated, just by spinning the text, and not changing the opacity. I will leave that up to you if you want to add that. I also added a pause where the text isn't animated (looping from 90% to 10% with 0deg rotation).
In order to get all elements on the same row, I added display: flex to your h1, and to make the spinning text to overlay I was forced to use a grid layout, where both children are on row 1 and column 1 (grid-area). I tried position: absolute but background-clip: text didn't work on Firefox when I did that.
I increased the font size in order to show the background-clip in a better way.
[edit] Apparently, Chrome bugs out when using background-clip: text together with backface-visibility: hidden.
Working example: Firefox
#hero > h1 {
display: flex;
margin: 0;
margin-bottom: 16px;
font-size: 78px;
font-weight: 700;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.verticalflip {
display: grid;
}
.verticalflip > div {
--animation-duration: 6s;
grid-area: 1 / 1;
animation: vertical var(--animation-duration) linear infinite;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.verticalflip > div:nth-child(1) {
animation-delay: calc(-0.5 * var(--animation-duration));
}
#keyframes vertical {
10% { transform: rotateX(0deg); }
40% { transform: rotateX(180deg); }
60% { transform: rotateX(180deg); }
90% { transform: rotateX(0deg); }
}
<section id="hero">
<h1 style="">
<div>Sample </div>
<div class="verticalflip">
<div>Change</div>
<div>Text</div>
</div>
</h1>
</section>
Working example: Chrome & Safari
#hero > h1 {
display: flex;
margin: 0;
margin-bottom: 16px;
font-size: 78px;
font-weight: 700;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
#hero div {
/* Chrome somehow "looses" the background when animating it */
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
-webkit-background-clip: text;
}
.verticalflip {
display: grid;
}
.verticalflip > div {
--animation-duration: 6s;
grid-area: 1 / 1;
animation: vertical var(--animation-duration) linear infinite;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.verticalflip > div:nth-child(1) {
animation-delay: calc(-0.5 * var(--animation-duration));
}
#keyframes vertical {
10% { transform: rotateX(0deg); }
40% { transform: rotateX(180deg); }
60% { transform: rotateX(180deg); }
90% { transform: rotateX(0deg); }
}
<section id="hero">
<h1 style="">
<div>Sample </div>
<div class="verticalflip">
<div>Change</div>
<div>Text</div>
</div>
</h1>
</section>
#hero > h1 {
display: flex;
margin: 0;
margin-bottom: 16px;
font-size: 78px;
font-weight: 700;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
#hero div {
/* Chrome somehow "looses" the background when animating it */
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
-webkit-background-clip: text;
}
.verticalflip {
display: grid;
}
.verticalflip > div {
--animation-duration: 6s;
grid-area: 1 / 1;
animation: vertical var(--animation-duration) linear infinite;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.verticalflip > div:nth-child(1) {
animation-delay: calc(-0.5 * var(--animation-duration));
}
#keyframes vertical {
10% { transform: rotateX(0deg); }
40% { transform: rotateX(180deg); }
60% { transform: rotateX(180deg); }
90% { transform: rotateX(0deg); }
}
<section id="hero">
<h1 style="">
<div>Sample </div>
<div class="verticalflip">
<div>Change</div>
<div>Text</div>
</div>
</h1>
</section>
I have made an animation which on hover must be like the image below;1
But instead it always align like this;2
I want to align all the in a straight line when animation is paused on hover on . But it did not happen.I tried to use animation-fill-mode:forwards; but it did not worked.All the <div id="circle"> must be align in a straight line such that it resembles a straight block of sevral colors just like my first pictures which was my expectation. It occurs sometime only but not every time. I want it to occur every time as i hover the <div>. You can use javascript too. but this animation must work and all <div> must align in a straight line.
.circle-container{
height:100px;
display:flex;
position:absolute;
width:fit-content;
overflow:hidden;
align-items:center;
justify-content:center;
}
div.circle1 {order:1;}
div.circle2 {order:2;}
div.circle3 {order:3;}
div.circle4 {order:4;}
div.circle5{order:5;}
.circle1, .circle2, .circle3, .circle4, .circle5{
border-radius:45%;
}
#circle{
align-items:center;
justify-content:center;
color:white;
display:flex;
height:55px;
width:55px;
}
.circle5{
background:#FF6347;
animation:bubbling5 1s infinite;
animation-direction:alternate;
}
.circle4{
background:#4682B4;
animation:bubbling4 1s infinite;
animation-direction:alternate;
}
.circle3{
background:#D2B48C;
animation:bubbling3 1s infinite;
animation-direction:alternate;
}
.circle2{
background:#008080;
animation:bubbling2 1s infinite;
animation-direction:alternate;
}
.circle1{
background:#D8BFD8;
animation:bubbling1 1s infinite;
animation-direction:alternate;
}
#keyframes bubbling1 {
0% {
transform: translateY(0px) translateX(22px);
}
50% {
transform: translateY(-10px) translateX(22px);
}
75% {
transform: translateY(10px) translateX(22px);
}
100% {
transform: translateY(0px) translateX(22px);
}
}
#keyframes bubbling2 {
0% {
transform: translateY(0px) translateX(12px);
}
45% {
transform: translateY(-10px) translateX(12px);
}
70% {
transform: translateY(10px) translateX(12px);
}
100% {
transform: translateY(0px) translateX(12px);
}
}
#keyframes bubbling3 {
0% {
transform: translateY(0px) translateX(2px);
}
40% {
transform: translateY(-10px) translateX(2px);
}
65% {
transform: translateY(10px) translateX(2px);
}
100% {
transform: translateY(0px) translateX(2px);
}
}
#keyframes bubbling4 {
0% {
transform: translateY(0px) translateX(-8px);
}
35% {
transform: translateY(-10px) translateX(-8px);
}
60% {
transform: translateY(10px) translateX(-8px);
}
100% {
transform: translateY(0px) translateX(-8px);
}
}
#keyframes bubbling5 {
0% {
transform: translateY(0px) translateX(-18px);
}
30% {
transform: translateY(-10px) translateX(-18px);
}
55% {
transform: translateY(10px) translateX(-18px);
}
100% {
transform: translateY(0px) translateX(-18px);
}
}
.circle-container:hover {
position:absolute;
}
.circle-container:hover .circle5 {
border-radius:0% 30% 30% 0%;
animation-play-state:paused;
transition: all 0.2s;
}
.circle-container:hover .circle4 {
border-radius:0%;
animation-play-state:paused;
transition: all 0.4s;
}
.circle-container:hover .circle3 {
border-radius:0%;
animation-play-state:paused;
transition: all 0.6s;
}
.circle-container:hover .circle2 {
border-radius:0%;
transition: all 0.8s;
animation-play-state:paused;
}
.circle-container:hover .circle1 {
border-radius:30% 0% 0% 30%;
transition: all 1s;
animation-play-state:paused;
}
.circle-container:hover .c-title {
display:none;
}
<div class="circle-container">
<div id="circle" class="circle1"><h1 class="c-title">E</h1></div>
<div id="circle" class="circle2"><h1 class="c-title">M</h1></div>
<div id="circle" class="circle3"><h1 class="c-title">A</h1></div>
<div id="circle" class="circle4"><h1 class="c-title">I</h1></div>
<div id="circle" class="circle5"><h1 class="c-title">L</h1></div>
</div>
Looks like someone produced a ton of unnecessary code =))
Regarding your question, you have to remove the animation at all, not pause it.
See the snippet below.
.circle-container {
height: 100px;
display: flex;
position: absolute;
width: fit-content;
overflow: hidden;
align-items: center;
justify-content: center;
}
.circle-container div {
display: inline-block;
height: 55px;
width: 55px;
margin-right: -10px;
border-radius: 45%;
color: white;
font:900 2em/55px serif;
text-align: center;
animation: bubbling 1s infinite alternate;
transition: all .2s;
}
.circle-container div:nth-child(1) {
background: #D8BFD8;
}
.circle-container div:nth-child(2) {
background: #008080;
animation-delay: .1s;
}
.circle-container div:nth-child(3) {
background: #D2B48C;
animation-delay: .2s;
}
.circle-container div:nth-child(4) {
background: #4682B4;
animation-delay: .3s;
}
.circle-container div:nth-child(5) {
background: #FF6347;
margin: 0;
animation-delay: .4s;
}
#keyframes bubbling {
50% {
transform: translateY(-10px);
}
75% {
transform: translateY(10px);
}
}
.circle-container:hover div {
border-radius: 0;
color: transparent;
transform: translateY(0);
animation: none;
}
.circle-container:hover div:last-child {
border-radius: 0 30% 30% 0;
}
.circle-container:hover div:first-child {
border-radius: 30% 0 0 30%;
}
<div class="circle-container">
<div>E</div>
<div>M</div>
<div>A</div>
<div>I</div>
<div>L</div>
</div>
I want a bar for the bottom of my webpage that has a nice animation, similar to this one: http://css-tricks.com/pop-from-top-notification/ but stays on screen until it is closed. This is all the css I have so far:
.about {
background: black;
text-align: left;
position: fixed;
z-index: 100;
bottom: 0;
left: 0;
width: 100%;
color: #0f0;
font-size: 21px;
font-family: Timeburner;
padding: 10px;
}
I don't care if it takes jquery or somthing else, as long as it works.
you need to add this css:
#-webkit-keyframes slideUp {
0% { -webkit-transform: translateY(50px); }
100% { -webkit-transform: translateY(0px); }
}
#-moz-keyframes slideUp {
0% { -moz-transform: translateY(50px); }
100% { -moz-transform: translateY(0px); }
}
#note {
-webkit-transform: translateY(-50px);
-webkit-animation: slideUp 2.5s 1.0s 1 ease forwards;
-moz-transform: translateY(-50px);
-moz-animation: slideUp 2.5s 1.0s 1 ease forwards;
}
here is the Fiddle Demo
here is your example with the Css animation: Fiddle (you will need to add the JS for the close button)
here is and example with slide down on close: Fiddle it uses Jquery but can also be done using pure JS:
close = document.getElementById("close");
close.addEventListener('click', function() {
$("#note").slideUp();
}, false);