So I've got some text inside a < div > tag and I want it to animate. Now I want the text to start from a low opacity and then have the opacity increase as time passes. I've found an easy way for it to DECREASE but I find it near impossible to make it start from that state and do it backwards since if I change the opacity attribute on my < p > the < div > will always treat the < p > at that opacity.
My code (chrome):
#-webkit-keyframes opac /* Safari and Chrome */
{
0% {opacity:0.4}
25% {opacity:0.4}
50% {opacity:0.7}
75% {opacity:0.8}
100% {opacity:1}
}
.doge1:hover {
animation-name: opac;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: opac;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
HTML:
<div class="doge1">
<p>
Transitions in CSS are applied to an element and specify that when a property changes it should do so gradually over a period of time. Animations are different. When applied, they just run and do their thing. They offer more fine-grained control as you can control different stops of the animations.
</p>
</div>
This? Live demo here (click).
.doge1 > p {
opacity: 0.4;
}
#-webkit-keyframes opac /* Safari and Chrome */
{
0% {opacity:0.4}
25% {opacity:0.4}
50% {opacity:0.7}
75% {opacity:0.8}
100% {opacity:1}
}
.doge1:hover > p {
animation-name: opac;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: opac;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
Not sure if this is your desired effect, but you could achieve this a little easier with:
.doge1 {
opacity: .4;
transition: all 2s;
}
.doge1:hover {
opacity: 1;
}
http://jsfiddle.net/JFA7g/
Related
So I'm trying to have a sentence where certain words are animated (rotated through) - I thought it was working, but once I viewed the site on my mobile I found an issue.
When viewed on a desktop (and even inside dev tools), the animated text is rendered in the correct size. However, once I view it on a mobile device (iPhone), the text becomes super small
I'm also using bootstrap on the page so I thought that maybe something was being overridden. But as you can see I've basically removed all the bootstrap classes and it still isn't working.
.animated span {
color: #007bff;
font-size: 0;
opacity: 0;
-ms-animation: topToBottom 10s infinite;
-webkit-animation: topToBottom 10s infinite;
animation: topToBottom 10s infinite;
}
.animated span:nth-child(2) {
-ms-animation-delay: 2s;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.animated span:nth-child(3) {
-ms-animation-delay: 4s;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.animated span:nth-child(4) {
-ms-animation-delay: 6s;
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
.animated span:nth-child(5) {
-ms-animation-delay: 8s;
-webkit-animation-delay: 8s;
animation-delay: 8s;
}
#-webkit-keyframes topToBottom {
0%,
20% {
font-size: 2.5rem;
opacity: 1;
}
/* visible for 1s */
20.01%,
100% {
opacity: 0;
font-size: 0rem;
}
<h1 class=" cover-heading animated">TribePulse replaces <br />
<span>status updates</span>
<span>engagement surveys</span>
<span>progress reports</span>
<span>status meetings</span>
<span>EoD emails</span>
</h1>
Demo on glitch: https://empty-cemetery.glitch.me/
When you view it on desktop, all the blue writing is the correct size. However, once you view it on mobile the animated text becomes tiny.
you can check how your page looks and performs on a mobile device:
https://developers.google.com/web/tools/chrome-devtools/device-mode/
you can also customize the contents using media queries.Media Queries for Standard Devices
If you want to know more info you can visit:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Ist it possible to avoid the CSS3-Pretag (-webkit-, -ms-, -o-) to keep the source code short and easy, because I use a lot of CSS3 on my website.
For example:
.scroll-up:hover:before {
animation-delay: 0s;
animation-duration: 0.65s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-name: scrollUp;
animation-timing-function: ease-out;
-webkit-animation-delay: 0s;
-webkit-animation-duration: 0.65s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-name: scrollUp;
-webkit-animation-timing-function: ease-out;
-ms-animation-delay: 0s;
-ms-animation-duration: 0.65s;
-ms-animation-fill-mode: forwards;
-ms-animation-iteration-count: 1;
-ms-animation-name: scrollUp;
-ms-animation-timing-function: ease-out;
-o-animation-delay: 0s;
-o-animation-duration: 0.65s;
-o-animation-fill-mode: forwards;
-o-animation-iteration-count: 1;
-o-animation-name: scrollUp;
-o-animation-timing-function: ease-out;
}
If the vendor prefixes are required for your target browser range, then no - you must include them.
You can use preproccessors like Sass and libraries like Bourbon to simplify your working code, or use a post proccessor like Autoprefixer or -prefix-free to adjust your code after you've written it.
You can use http://caniuse.com/ to check if you really need the prefixes or not, as well as compatibility tables on MDN.
I have the following CSS:
#-webkit-keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
#-webkit-keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.intro-text-0 {
opacity: 0;
-webkit-animation: fade-in 1s linear 1s,
fade-out 1s linear 3s;
-webkit-animation-fill-mode: forwards;
}
.intro-text-1 {
opacity: 0;
-webkit-animation: fade-in 1s linear 2s,
fade-out 1s linear 4s;
-webkit-animation-fill-mode: forwards;
}
And the simple HTML code:
<div class="intro-text-0">Hello</div>
<div class="intro-text-1">Holla</div>
When I run it, "Hello" appear in 1 second and in 3 seconds instead of fading out for 1 second, it fades out instantly. Here it is on JSFiddle: http://jsfiddle.net/3er6y0df/
I tried switching it to this:
.intro-text-0 {
opacity: 0;
-webkit-animation: fade-in 1s linear 2s,
fade-out 1s linear 4s;
-webkit-animation-fill-mode: forwards;
}
And it works perfectly.
I must mention, that this bug appeared only in Chrome (Version 37.0.2062.120 Built on Debian 7.6, running on Debian 7.7 (281580) (64-bit)), I check it out in Firefox and IE11 and there is no problem there.
Not really a bugfix though it could be a alternative.
Instead of animating a element with keyframes + animation on the elements itself why not put it all in the keyframe animation?
#keyframes AnimateMe {
0% { opacity:0%; }
80% { opacity:100%; }
100% { opacity:0%; }
}
I have experimented a bit and found a much simpler solution:
-webkit-animation: fade-in 1s linear 1001ms,
fade-out 1s linear 3s;
-webkit-animation-fill-mode: forwards;
Using 1001ms instead 1s (=1000ms) will not be noticed by a regular human eye :)
Can somebody tell me why blink effect is not working chrome browser
<p class="blink">at least it's not Comic Sans</p>
<style>
.blink {
animation-duration: 1s;
animation-name: blink;
animation-iteration-count: infinite;
animation-timing-function: steps(2, start);
}
#keyframes blink {
80% {
visibility: hidden;
}
}
</style>
And also I require this to work on every iOS and Android devices. Please suggest.
You are missing -webkit prefixes for animation and keyframes.
First of all, for reference, please do try out this:Tryit from W3School
Especially in chrome, things such as animation, transformation requires -webkit prefix. After reading my reference, you should be able to do it yourself.
But here is the solution anyway. See result here: JSFiddle
.blink {
-webkit-animation-duration: 1s;
-webkit-animation-name: blink;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: steps(2, start);
animation-duration: 1s;
animation-name: blink;
animation-iteration-count: infinite;
animation-timing-function: steps(2, start);
}
#-webkit-keyframes blink {
80% {
visibility: hidden;
}
}
#keyframes blink {
80% {
visibility: hidden;
}
}
You now can go on and read more about prefix (simply search about it google)
I have a small animation that is working in firefox, but not in webkit browsers. Maybe someone sees the mistake cause i've looked for an hour... It is part of a impress.js presentation, similar to prezi.
Thanks!
css:
#its.step.present h5{
display: inline-block;
position:absolute;
animation: aia2 5s linear infinite alternate;
-moz-animation: aia2 5s linear infinite alternate;
-webkit-animation: aia2 5s linear infinite alternate;
-ms-animation: aia2 5s linear infinite alternate;
-o-animation: aia2 5s linear infinite alternate;
-moz-animation-delay: 4s;
-webkit-animation-delay: 4s;
-ms-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
#-moz-keyframes aia2{
0%{
left:120px;
-moz-transform:scale(1) rotate(0deg);
-webkit-transform:scale(1) rotate(0deg);
-ms-transform:scale(1) rotate(0deg);
-o-transform:scale(1) rotate(0deg);
transform:scale(1) rotate(0deg);
color: red;
}
90%{
left: 580px;
-moz-transform:scale(1) rotate(2000deg);
-webkit-transform:scale(1) rotate(2000deg);
-ms-transform:scale(1) rotate(2000deg);
-o-transform:scale(1) rotate(2000deg);
transform:scale(1) rotate(2000deg);
}
100%{
left: 580px;
}
}
html:
<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
<p>
<ul>
<li>Web Development,</li>
<li>Web Design,</li>
<li>Log<h5>o</h5> Design,</li>
<li>Web Marketing,</li>
</ul>
<ul class="doua">
<li><h6>e</h6> Commerce,</li>
<li>CMS (WP, J, D),</li>
<li>Cust m Apps</li>
<li>and others.</li>
</ul>
</p>
</div>
You have to put the general animation rule after the browser specific ones:
-webkit-animation: aia2 5s linear infinite alternate;
-moz-animation: aia2 5s linear infinite alternate;
-ms-animation: aia2 5s linear infinite alternate;
-o-animation: aia2 5s linear infinite alternate;
animation: aia2 5s linear infinite alternate; /* this comes last */
And since you have -webkit-animation: aia2, -moz-animation: aia2 etc. you have to set the animation for each browser like:
#-moz-keyframes aia2{
...
}
#-webkit-keyframes aia2{
...
}
#-o-keyframes aia2{
...
}
Chrome v43 dropped the -webkit- prefix for animation so if this worked before but not now, that's probably why.
One thing to check if you're developing in Firefox is Firefox will take an animation-name in quotes, but Chrome/Edge/Safari/Webkit will not.
Acceptable ONLY in Firefox:
animation-name: 'theAni';
Acceptable in all browsers (Chrome, Edge, Safari & Firefox):
animation-name: theAni;
for each property that you want add animation you need first determine its value then you can change it in keyframe.
here is a simple code that you can try it:
<!DOCTYPE html>
<head>
<style>
#forTest {
display: inline-block;
background-color: darkcyan;
width: 500px; /* here we determine the value of property that we want add animation */
height: 30px;
animation: a1;
animation-fill-mode: forwards;
animation-duration: 5s;
}
#keyframes a1{
to {
width: 100px;
}
}
</style>
</head>
<body>
<div id="forTest"></div>
</body>
</html>