I seem to be having an problem on the iphone with keeping the end state of my animation, I have a fade in on the the text in my header that doesn't seem to persist it's end state, even when adding forwards. Any insight into this?
Here's the css:
#headerwrap h1 {
color: white;
font-size: 70px;
font-weight: 300;
margin: 0;
opacity: 1;
letter-spacing: 3px;
z-index: 9999;
animation: fadeInDown 3s forwards;
-moz-animation: fadeInDown 3s forwards; /* Firefox */
-webkit-animation: fadeInDown 3s forwards; /* Safari and Chrome */
-o-animation: fadeInDown 3s forwards; /* Opera */
}
And here's the animation keyframes
#-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
-ms-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
It fixed the problem on desktop, but when I check on my iphone they animations come in, then when they complete the text disappears.
Thanks!
I seemed to have fixed it by removing the transform:none; on the 100% frames.
Related
So today is a special date ... 🙂
Both Ambigram and Palindrome!
I tried to make CSS that would demonstrate this, but I have some issues:
There is a small jump between the end of the rotate and the original place of the text.
In the first half of the animatoin (from 0% to 50%) the Palindrome should be demonstrated. Do not know how to do such animation. There are all kinds of options, for example video of 02/02/2020 https://thumbs.gfycat.com/GroundedReliableInchworm-mobile.mp4
#import url('https://fonts.googleapis.com/css2?family=Dhurjati&family=Qahiri&display=swap');
.rotate{
color: rgb(22 02 2022);
width: 100%;
font-size: 100px;
text-align: center;
font-family: Dhurjati, Qahiri;
position: absolute;
animation: rotate 10s linear infinite 0s;
-ms-animation: rotate 10s linear infinite 0s;
-webkit-animation: rotate 10s linear infinite 0s;
}
.move1 {
margin-left: 10px;
}
.move2 {
margin-left: 30px;
}
#-moz-keyframes rotate{
50% { opacity: 1; -moz-transform: rotate(0deg); }
100% { opacity: 1; -moz-transform: rotate(180deg); }
}
#-webkit-keyframes rotate{
50% { opacity: 1; -webkit-transform: rotate(0deg); }
100% { opacity: 1; -webkit-transform: rotate(180deg); }
}
#-ms-keyframes rotate{
50% { opacity: 1; -ms-transform: rotate(0px); }
75% { opacity: 1; -ms-transform: rotate(180px); }
}
<div class="rotate">22<span class="move1">02<span><span class="move2">2022</span></div>
This animation isn't working in firefox, however it works fine in chrome, any ideas what might be wrong? Thanks!
CSS
.modular-template-wrapper .two-col-two-rows-img-txt-ocapi .sk-spinner-three-bounce div {
width: 8px;
height: 8px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #000;
display: inline-block;
-webkit-animation: sk-threeBounceDelay 1.4s infinite ease-in-out;
animation: sk-threeBounceDelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
/* line 203, ../../sass/modules/qv-overlay.scss */
.modular-template-wrapper .two-col-two-rows-img-txt-ocapi .sk-spinner-three-bounce .sk-bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
/* line 206, ../../sass/modules/qv-overlay.scss */
.modular-template-wrapper .two-col-two-rows-img-txt-ocapi .sk-spinner-three-bounce .sk-bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
#-webkit-keyframes sk-threeBounceDelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes sk-threeBounceDelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
HTML
<div class="sk-spinner sk-spinner-three-bounce">
<div class="sk-bounce1"></div> <div class="sk-bounce2"></div>
<div class="sk-bounce3"></div>
</div>
Right now my code has the animation appear then it applies the 2 second delay then the animation runs.
How do I keep the animation from first appearing before the delay and then the animation?
#-webkit-keyframes fadeInUp1 {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInUp1 {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
.fadeInUp1 {
-webkit-animation-name: fadeInUp1;
animation-name: fadeInUp1;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
You can use animation-fill-mode:
The animation-fill-mode CSS property specifies how a CSS animation
should apply styles to its target before and after it is executing.
backwards
The animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and
retain this during the animation-delay period.
.fadeInUp1 {
animation-fill-mode: backwards;
}
#-webkit-keyframes fadeInUp1 {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInUp1 {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
.fadeInUp1 {
-webkit-animation-name: fadeInUp1;
animation-name: fadeInUp1;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}
<div class="fadeInUp1">Lorem ipsum</div>
I'm trying to get a bouncing mouse animation to work on my website.
The exact same code works on another website, whereas on mine it just doesn't do anything.
Here's the css:
.mouse {
display: block;
margin: 0 auto;
text-align: center;
width: 100%;
font-size: 32px;
color: #fff;
z-index:9999;
position: absolute;
color: #e8e8e8;;
bottom: 240px;
}
.mouse i {
-webkit-animation: todown 1.2s infinite linear;
transition: all 0.3s ease-in-out;
}
The HTML:
<a href="#x11" class="mouse">
<i class="fa fa-angle-double-down icon-option"></i>
</a>
On this website you can see the scrolldown icon I'm trying to create: http://noxxar.com/demo/uralco/
If you want to use CSS animations you need to define #keyframes.
Luckily the CSS on the theme you linked isn't minified or anything, so you can just copy/paste the parts you want to recreate.
Since Firefox 15 the -moz vendor prefix isn't needed but Chrome and other Webkit Browser still need -webkit-animation: http://caniuse.com/#feat=css-animation
CSS:
#to-slider-scrollto i {
-webkit-animation: todown 1.2s infinite linear;
animation: todown 1.2s infinite linear;
}
#to-slider-scrollto i:hover {
-webkit-animation: none;
animation: none;
}
#-webkit-keyframes todown {
0% {
-webkit-transform: translateY(-15px);
opacity: 0;
}
10% {
-webkit-transform: translateY(-15px);
opacity: 0;
}
50% {
-webkit-transform: translateY(0);
opacity: 1;
}
90% {
-webkit-transform: translateY(15px);
opacity: 0;
}
100% {
-webkit-transform: translateY(15px);
opacity: 0;
}
}
#keyframes todown {
0% {
transform: translateY(-15px);
opacity: 0;
}
10% {
transform: translateY(-15px);
opacity: 0;
}
50% {
transform: translateY(0);
opacity: 1;
}
90% {
transform: translateY(15px);
opacity: 0;
}
100% {
transform: translateY(15px);
opacity: 0;
}
}
Working codepen demo with only the needed CSS
Check out cross browser compatibility
.mouse i {
-webkit-animation: todown 1.2s linear infinite;
animation: todown 1.2s linear infinite;
}
#-webkit-keyframes todown {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
50% {
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
}
#keyframes todown {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
50% {
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
}
the following animation doesn't even load in Safari browser (but works nicely in Chrome, Mozilla, IE, Opera)
http://codepen.io/anon/pen/utdIK
Any idea how to fix it? This problem looks similar, but it didn't fit to my problem.
CSS3 animation not working in safari
HTML:
<div id="spinner-2">
<div class="slices bar">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="maskWheel"></div>
</div>
CSS:
#spinner-2 {
width: 45px;
height: 45px;
-webkit-border-radius: 100px;
-moz-border-radius: 50%;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
-webkit-animation: spin .8s infinite steps(8);
-moz-animation: spin .8s infinite steps(8);
-ms-animation: spin .8s infinite steps(8);
-o-animation: spin .8s infinite steps(8);
animation: spin .8s infinite steps(8);
}
.slices {
width: 45px;
height: 45px;
position: relative;
transform-origin: right bottom;
}
.slices.bar div {
width: 100%;
height: 100%;
position: absolute;
-webkit-border-radius: 100px;
-moz-border-radius: 50%;
border-radius: 50%;
background: -webkit-linear-gradient(45deg, #cdcdcd 43%, transparent 43%) 0 0;
background: -moz-linear-gradient(45deg, #cdcdcd 43%, transparent 43%) 0 0;
background: -o-linear-gradient(45deg, #cdcdcd 43%, transparent 43%) 0 0;
background: linear-gradient(45deg, #cdcdcd 43%, transparent 43%) 0 0;
background-repeat: no-repeat;
background-size: 50% 50%}
#-webkit-keyframes spin {
to {
transform: rotate(1turn);
}
}#-moz-keyframes spin {
to {
transform: rotate(1turn);
}
}#-ms-keyframes spin {
to {
transform: rotate(1turn);
}
}#keyframes spin {
to {
transform: rotate(1turn);
}
}.slices.bar div:nth-child(1) {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.slices.bar div:nth-child(2) {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.slices.bar div:nth-child(3) {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.slices.bar div:nth-child(4) {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.slices.bar div:nth-child(5) {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.slices.bar div:nth-child(6) {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.slices.bar div:nth-child(7) {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.slices.bar div:nth-child(8) {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
.slices.bar div:nth-child(3) {
background: linear-gradient(45deg, #ed3000 43%, transparent 43%) 0 0;
background-repeat: no-repeat;
background-size: 50% 50%}
As Dan stated in his answer, the -webkit- prefix was missing.
One issue for Safari 5 is that shortend properties will not be interpreted by the browser.
You need to specify each single animation property in full.
-webkit-animation-name: spin;
-webkit-animation-duration: 8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: steps(8);
-moz-animation-name: spin;
-moz-animation-duration: 8s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: steps(8);
-ms-animation-name: spin;
-ms-animation-duration: 8s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: steps(8);
-o-animation-name: spin;
-o-animation-duration: 8s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: steps(8);
animation-name: spin;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: steps(8);
If still does not work you can try to remove the to and add the percentage and change the 1turn unit and add the default one in degrees.
#-webkit-keyframes spin {
100% {
transform: rotate(360deg);
}
}#-moz-keyframes spin {
100% {
transform: rotate(360deg);
}
}#-ms-keyframes spin {
100% {
transform: rotate(360deg);
}
}#keyframes spin {
100% {
transform: rotate(360deg);
}
DEMO http://jsfiddle.net/a_incarnati/q0v1wgc8/2/ with no 'to' and '1turn'
DEMO http://jsfiddle.net/a_incarnati/q0v1wgc8/3/
Let me know if it works in Safari 5.0.5
The -webkit- prefix was missing from your webkit specific keyframe.
#-webkit-keyframes spin {
to {
-webkit-transform: rotate(1turn);
}
Here's an updated Codepen
Tested in Safari 7.
I would just like to add that the element should be display:block type in Safari (display: inline works in chrome only ...)