I have a simple transform & transition on a div element. However, it doesn't appear to be working on page loads/re-visits.
Really appreciate if I could be directed to a possible solution.
.container {
width: 50%;
text-align: center;
background: #ccff44;
padding: 50px 5px;
border: #000 2px solid;
margin: auto;
transform: translate3D(-50px, 0, 0);
transition: all 2s ease-in;
}
<div class="container">
<p>Main paragraph</p>
</div>
Hello I think what you are looking for is an animation
the transition will not trigger any movement on its own
#keyframes enter {
from {
transform: translateX(-50px);
}
to {
transform: translateX(0px);
}
}
.container {
width: 50%;
text-align: center;
background: #ccff44;
padding: 50px 5px;
border: #000 2px solid;
margin: auto;
animation: enter 2s linear;
}
<div class="container">
<p>Main paragraph</p>
</div>
Related
I have a loader on my website which is basically a logo spinning in 3D for a few seconds until the page is loaded. The loader works perfectly in all major browsers on android and Windows but, it glitches badly on iOS (in both Safari and Chrome).
Glitch in Chrome on iPhone
Glitch in Safari on iPhone
HTML:
<div id="loader">
<div id="loader_spin_div" class="d-flex justify-content-center">
<img class="img-fluid mx-auto" id="loader_spin" src="assets/img/Logo_329x329.webp" width="500"
height="500" alt="Refresh Your Browser To See The Animation!">
</div>
</div>
CSS:
#loader {
background: #ff9472;
height: 100%;
width: 100%;
position: fixed;
z-index: 2;
}
#loader_spin {
animation: spin 1.5s linear infinite;
border: 2px solid #fff;
border-radius: 150px;
display: block;
-webkit-box-shadow: 11px -3px 48px 5px #fff;
box-shadow: 11px -3px 48px 5px #fff;
transform: rotateY(45deg);
}
#keyframes spin {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(179deg);
}
100% {
transform: rotateY(1deg);
}
}
#loader_spin_div {
width: 18vh;
margin: auto;
margin-top: 18vh;
}
#media (min-width: 440px) {
#loader_spin_div {
width: 27vh;
}
}
I tried changing the layering (z-index of the elements), which I read in another article.
Safari thinks in a real 3D space. The rotating image will go "through" the pane while rotating and half of it will not be visible. You will have to "lift" the parent container of the spinning image above the pane.
Bonus Tip: If you set the "perspective" you will get a real 3D effect.
See the following example - this will work in Safari:
#loader {
background: #ff9472;
height: 100%;
width: 100%;
position: fixed;
z-index: 2;
}
#loader_spin {
animation: spin 1.5s linear infinite;
border: 2px solid #fff;
border-radius: 150px;
display: block;
-webkit-box-shadow: 11px -3px 48px 5px #fff;
box-shadow: 11px -3px 48px 5px #fff;
transform-origin: center center;
}
#keyframes spin {
0% {
transform: rotate3d(0);
}
100% {
transform: rotateY(360deg);
}
}
#loader_spin_div {
width: 18vh;
margin: auto;
margin-top: 18vh;
transform: translateZ(100px) perspective(300px);
transform-style: preserve-3d;
}
#media (min-width: 440px) {
#loader_spin_div {
width: 27vh;
}
}
<div id="loader">
<div id="loader_spin_div" class="d-flex justify-content-center">
<div class="img-fluid mx-auto" id="loader_spin">
The world goes round and round!
</div>
</div>
</div>
Is there a way to animate the "hover out" in pure CCS? In the example below, all the action post hovering is doing exactly what is suppose to do, the problem comes when the animation / transition going backwards after hovering out. I need my div "tiny" animating back the way is animating in (right now the width is going back without transition) and my whatsapp icon is doing the other way around (I need to change the opacity without fading after hovering out).
In one of my approaches, I change the animation on my div with a transition: opacity (like the WA icon), BUT did not find a way to do the bouncy effect that is required. On the other hand the icon did not respond after insert a #keyframes inside the hover action (maybe out of scope?).
body {
background-color: blue;
}
.whatsapp-icon {
position: fixed;
left: 200px;
top: 30px;
opacity: 0;
transition: opacity 0.2s;
}
.tiny:hover+.whatsapp-icon {
opacity: 1;
}
.tiny:hover {
animation: animateDiv 0.4s;
animation-fill-mode: forwards;
}
.tiny {
position: fixed;
opacity: 1;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(228, 231, 235);
border-radius: 15px;
width: 200px;
height: 100px;
box-shadow: 3px 3px 10px black;
}
.box {
position: fixed;
width: 200px;
height: 100px;
cursor: default;
}
#keyframes animateDiv {
70% {
width: 255px;
}
85% {
width: 248px;
}
100% {
width: 250px;
}
}
<script type="module" src="index.js"></script>
<div class="container">
<div class="tiny">
<a class="box" href="https://api.whatsapp.com/send?phone=+XXXXXXXX" target="_blank">
</a>
</div>
<div class="whatsapp-icon">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/240px-WhatsApp.svg.png" width="50" height="50">
</div>
</div>
Hopefully someone can give me a hint. Thx in advance.
Use a transition instead:
body {
background-color: blue;
}
.whatsapp-icon {
position: fixed;
left: 200px;
top: 30px;
opacity: 0;
transition: opacity 0.2s;
}
.tiny:hover+.whatsapp-icon {
opacity: 1;
}
.tiny:hover {
width: 250px;
}
.tiny {
position: fixed;
opacity: 1;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(228, 231, 235);
border-radius: 15px;
width: 200px;
height: 100px;
box-shadow: 3px 3px 10px black;
transition: width 0.4s;
}
.box {
position: fixed;
width: 200px;
height: 100px;
cursor: default;
}
<script type="module" src="index.js"></script>
<div class="container">
<div class="tiny">
<a class="box" href="https://api.whatsapp.com/send?phone=+XXXXXXXX" target="_blank">
</a>
</div>
<div class="whatsapp-icon">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/240px-WhatsApp.svg.png" width="50" height="50">
</div>
</div>
Transitions can do/undo without the user having to show the points of change.
I have a little issue with my SCSS code. I'm tired to put a card behind other, but just stack in the bottom of the parent container, I was trying to invert position parent from relative to absolute but isn't work I'm really stuck here.
.card {
perspective: 150rem;
-moz-perspective: 150rem;
position: relative;
height: 50rem;
&__side {
color: $color-white;
font-size: 2rem;
height: 50rem;
transition: all .8s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
backface-visibility: hidden;
border-radius: 3px;
box-shadow: 0 1.5rem 4rem rgba($color-black, $alpha: .15);
&--front {
background-color: $color-white;
}
&--back {
transform: rotateY(180deg);
&-1 {
background-image: linear-gradient(to right bottom, $color-secundary-light, $color-primary-light);
}
}
}
&:hover &__side--front {
transform: rotateY(180deg);
}
&:hover &__side--back {
transform: rotateY(0);
}
}
<div class="row">
<div class="col-1-of-3">
<div class="card">
<div class="card__side card__side--front"> Front </div>
</div>
<div class="card">
<div class="card__side card__side--back card__side--back-1"> Back </div>
</div>
</div>
I use the following code for a text reveal animation but the text is already there before the 3 second delay that I declare. How can I fix this?
.header>span {
animation: slider 3s 3s ease-in;
overflow: hidden;
white-space: nowrap;
}
#keyframes slider {
0% {
max-width: 0%;
border-right: 4px solid #7CDD26;
}
99% {
max-width: 100%;
border-right: 4px solid #7CDD26;
}
100% {
max-width: 100%;
border-right: none;
}
}
<div class="header">
<span>This is some text</span>
</div>
you need at least inline-block (or block) to your span element to be able to use min-width then you need to add min-width:0% initially and add forwards to the animation to keep the last state:
.header>span {
animation: slider 3s 3s ease-in forwards;
overflow: hidden;
white-space: nowrap;
display:inline-block;
max-width: 0%;
}
#keyframes slider {
0% {
max-width: 0%;
border-right: 4px solid #7CDD26;
}
99% {
max-width: 100%;
border-right: 4px solid #7CDD26;
}
100% {
max-width: 100%;
border-right: none
}
}
<div class="header">
<span>This is some text</span>
</div>
This is kind of embarassing for me, but I have a final project for my Software engineering class, and I'd been searching for tutorials so I can see and learn about html css and javascript to implement it in my project. I never worked on those, so I found a cool tutorial about some animation that I wanted to implement in my project so I decided to give it a try, and I cant get the code to work.
Here's the tutorial link.
http://davidwalsh.name/logo-animation
Here's my code (http://jsfiddle.net/5x4wv/):
<!DOCTYPE html>
<html>
<head>
<body>
<div class="mike">
<div class="head">
<div class="eyes">
<div class="eye">
<div class="pupil"></div>
</div>
<div class="eye">
<div class="pupil"></div>
</div>
</div>
<div class="nose">
<div class="ball"></div>
<div class="ball"></div>
</div>
<div class="mouth"></div>
</div>
</div>
<style>
div {
border-radius: 50%;
box-sizing: border-box;
}
.mike {
width: 400px;
margin: 0 auto;
padding-top: 2%;
transition: all 1s;
}
.mike:hover {
transform: scale(1.5) rotate(360deg);
}
.head {
width: 195px;
height: 120px;
background: #92ae57;
position: relative;
z-index: 1;
margin-left: 103px;
}
.eyes {
width:200px;
position: absolute;
bottom: 45px;
}
.eye {
width: 95px;
height: 93px;
background-color: #ffe13b;
border: 10px solid #92ae57;
display: inline-block;
z-index: 2;
animation: eyes 5s infinite step-start 0s;
}
.eye:last-child {
float:right;
}
.pupil {
width: 1px;
height: 1px;
border: 10px solid #353535;
display: inline-block;
position: absolute;
top: 38px;
margin-left:27px;
z-index: 3;
animation: pupil 5s infinite step-start 0s;
}
.pupil:last-child{
float:right;
}
.ball {
width: 1px;
height: 1px;
border: 5px solid #6f8346;
position: absolute;
top: 70px;
left: 88px;
}
.ball:last-child {
float:left;
margin-left: 14px;
}
.mouth {
height: 100px;
width: 180px;
border-bottom: 4px solid #6f8346;
position: relative;
top: 8px;
left: 7px;
}
/* Animations */
#keyframes eyes {
0%, 100% {
background: #92ae57;
border-radius: 50%;
border: 10px solid #92ae57;
}
5%, 95% {
background:#ffe13b;
border-radius: 50%;
border: 10px solid #92ae57;
}
}
#keyframes pupil {
0%, 100% {
opacity: 0;
}
5%, 95% {
opacity: 1;
}
}
</style>
</body>
</html>
I'm using Sublimetext 2 and running in Chrome.
Prefix stuff...
Delay duration only delays animation at first start not at every iteration.
USE FLOATS BARELY...use relative position especially for this..
http://jsfiddle.net/T862G/ take a look it works
#-webkit-keyframes eyes {
10% {background-color:#92ae57;}
25% {background-color:#ffe13b;}
}
#-webkit-keyframes pupil {
10% {opacity: 0;}
25% {opacity: 1;}
}
.mike:hover {
-webkit-transform: rotate(360deg) scale(1.5);
}