I have the following code:
.picTransition .item {
position: absolute;
left: 0;
right: 0;
opacity: 0;
-webkit-animation: picTransition 56s linear infinite;
-moz-animation: picTransition 56s linear infinite;
-ms-animation: picTransition 56s linear infinite;
animation: picTransition 56s linear infinite;
}
.picTransition.paused{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}
.picTransition .item:nth-child(2) {
-webkit-animation-delay: 14s;
-moz-animation-delay: 14s;
-ms-animation-delay: 14s;
animation-delay: 14s;
}
.picTransition .item:nth-child(3) {
-webkit-animation-delay: 28s;
-moz-animation-delay: 28s;
-ms-animation-delay: 28s;
animation-delay: 28s;
}
.picTransition .item:nth-child(4) {
-webkit-animation-delay: 42s;
-moz-animation-delay: 42s;
-ms-animation-delay: 42s;
animation-delay: 42s;
}
I am making a mistake on the how to pause the slides. I have used the animation-play-state: paused, but it does not work. I can use the jquery function, but I really want to try and get this to work in css only. Am I screwing up on the parent child relation? Or is this timing sequence not supported or messing with the pause issue? Perhaps I need to do a hover type pause and build a new div for that? I know I am making a simple mistake.
It looks like you're saying any element with the classes .picTransition & .paused should pause the animation, but without JavaScript that will either be all of the time as you've set the class by default or never because it doesn't have that class.
If you'd like it to pause on an event use JavaScript to add/remove the class or if it's a simple hover event, change .picTransition.paused to .picTransition:hover.
If .paused is a child element of .picTransition make sure there's a space between the two in your selector.
If none of that is right, could you possibly create a jsFiddle for us to look at?
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/
I have been trying to figure this out for some time now, no success so far though: I want to run a typing animation using CSS. The animation has to start after 7 seconds. I can't figure out how to do this tho. My code looks like this:
HTML
<div class='background-fullwidth'>
<div class="css-typing">
This text will pop up using an typewriting effect
</div>
</div>
CSS
.css-typing {
width: 360px;
white-space: nowrap;
overflow: hidden;
-webkit-animation: type 3s steps(50, end);
animation: type 3s steps(55, end);
-o-animation: type 5s steps(50, end);
-moz-animation: type 3s steps(55, end);
padding: 10px;
}
.background-fullwidth {
width: 400px;
background-color: rgba(0, 50, 92, 0.7);
}
#keyframes type {
from { width: 0; }
to { width: 360px; }
}
#-moz-keyframes type {
from { width: 0; }
to { width: 360px; }
}
#-webkit-keyframes type {
from { width: 0; }
to { width: 360px; }
}
Does anyone know how to add this timer - let's say the animation has to start after 7 seconds? From second 1 to 7 only the wraping DIV (blue background) has to be shown.
Fiddle looks like this:
CSS Animation
You'll have to use 3 different animation properties.
animation-delay: It helps you achieve the solution to the basic problem of starting the animation after 7 seconds.
animation-iteration-count; This property lets you decide the number of times the animation repeats itself. Setting it to 1 will limit it to a single animation instance.
animation-fill-mode: Setting this property to forward will make sure that the width remains 320 at the end of the animation.
CSS
animation-delay: 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
width: 0; // So that the animation starts from 0
Review the fiddle at https://jsfiddle.net/kaminasw/at6mbxyr/
By experimenting for several times i found an easy/clever way to make this possible :
You can start the animation after certain time
Element will be hidden until the start of the animation.
My Keyframe Animation (It can be any animation) :
#keyframes fadeUp{
from{
transform: translateY(100px);
opacity: 0;
}
to{
opacity: 1;
}
}
Then i used the animation like:
h1{
animation: fadeUp 1.5s ease 7s backwards; /*Waiting time of 7 seconds*/
}
Above code is similar to :
h1{
animation-name: fadeUp;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-delay: 7s; /*For X waiting time change the value to Xs*/
animation-fill-mode: backwards;
}
:-)
You need to use animation-delay for that like this:
.css-typing {
--other properties--
-webkit-animation-delay: 7s; /* Safari 4.0 - 8.0 */
animation-delay: 7s;
}
Use animation-delay property:
animation-delay: 2s;
-webkit-animation-delay: 2s;
there is a property animation-delay
provide this property to your class element.
check the below example animation starts after 7 seconds
http://codepen.io/anon/pen/dNqmvB
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)
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/
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>