This is a bit crazy, but I got a project where I couldn't use JS.
I have an mp4 that needs only to be played after the CSS animation is finished.
To be better explained, I need to hide the cover image, then play the video behind it.
Is there a way to play mp4 from CSS/HTML only?
HTML
<div class="chute-background-image" style="background-image: url(./fg_bg.png);"></div>
<div class="winning-video">
<video>
<source src="./room.mp4" type="video/mp4">
</video>
</div>
CSS
.chute-background-image {
opacity: 1;
animation: hide 1s linear forwards;
}
#keyframes hide {
0% {
opacity: 1;
display: block;
}
99% {
opacity: 0;
display: block;
}
100% {
opacity: 0;
display: none;
}
}
No, it isn't possible to do this without JavaScript.
No play control API is available by CSS.
Related
I'm designing an HTML game and I would like to know how I can constantly fade in and out the "START" button in the game with CSS.
If jQuery is needed, that's okay; however, whenever possible, please use pure HTML and CSS. Thanks!
.pulseButton {
animation: pulse 5s infinite;
}
#keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}`
I have 3 vector images created in Adobe Illustrator.
I want animate this vector quality images same way as gif does, fast endless loop sequence of 3 images in .svg format in browser mypage.php <img src="assets/img/logo.svg" alt="" alt="" width="65" height="45"/>.
What would be most correct way to get such animation for .svg, do I have to use all given methods to create vector animation, or in my scenario case I can do it some different way
There are a few ways you can do it. Given the information you have provided, here is one way.
We stack the frames on top of one another. Then make them visible one at a time.
.sequence {
position: relative;
}
.sequence img {
position: absolute;
top: 0;
opacity: 0; /* start all frames invisible */
animation: cycle 3s steps(1) infinite;
}
/* three images, so each gets made visible for 1/3 of the time */
#keyframes cycle {
0% { opacity: 1; }
33% { opacity: 0; }
}
/* start (ie. show) the second frame 1 sec after the first */
.sequence img:nth-child(2) {
animation-delay: 1s;
}
/* start (ie. show) the third frame 2 sec after the first */
.sequence img:nth-child(3) {
animation-delay: 2s;
}
<div class="sequence">
<img src="https://placeimg.com/300/200/animals"/>
<img src="https://placeimg.com/300/200/nature"/>
<img src="https://placeimg.com/300/200/people"/>
</div>
These images happen to be JPEGs, but it doesn't matter what type they are. Your SVGs should work.
Given you have SVGs, you might find it better to combine them in a single SVG. Put the contents for each frame in it's own group (<g> element). Then use a similar approach as above, but instead show the groups one at a time.
For what you want, the fact that it are svg images is not relevant.
You can create an element and animate trough the different files as background.
div{
width: 102px;
height: 102px;
border: 1px solid black;
animation: rotateImages 1s infinite;
}
#keyframes rotateImages {
0% { background: url("https://www.placecage.com/g/100/100"); }
32% { background: url("https://www.placecage.com/g/100/100"); }
33% { background: url("https://www.placecage.com/100/100"); }
65% { background: url("https://www.placecage.com/100/100"); }
66% { background: url("https://www.placecage.com/c/100/100"); }
100% { background: url("https://www.placecage.com/c/100/100"); }
}
<div></div>
So I just saw this question where op defined an animation called flash. It causes weird behaviour in all browsers I tested (Chrome and Firefox - both recently updated):
The animation values I enter get ignored and instead the block fades in and out with a yellow color - kind of like a flash.
Here's a screenshot of what I'm seeing:
I couldn't find anything about predefined CSS animations and I can't seem to override them either.
Here's the code snippet:
.block {
height: 100px;
width: 100px;
background-color: red;
}
.flash {
animation: flash 2s infinite;
}
#keyframes flash {
0% {
background-color: blue;
}
50% {
background-color: red;
}
100% {
background-color: blue;
}
}
.notFlash {
animation: notFlash 2s infinite;
}
#keyframes notFlash {
0% {
background-color: blue;
}
50% {
background-color: red;
}
100% {
background-color: blue;
}
}
<div class='block flash'>Flash Animation Name</div>
<div class='block notFlash'>A Different Animation Name</div>
What is happening here? Does such a thing as preset animations exist?
I couldn't find anything googling.
StackOverflow uses an animation with that name in its own styles. As the StackSnipppet is not sandboxed, this style overrides the one you define in the snippet.
The following snippet shows the animation in use in the console output to indicate a new item has been logged to the console:
let i = 0
setInterval(() => {
console.log(++i)
}, 1000)
You can see that this is not the case if you try a different snippet tool or run your code locally.
See the post on meta for more information (linked by esqew in the comments).
Currently I have different audio files displayed using tables in html5 and css. In each cell with the audio file is text which has artist information etc. What I want to happen is the text to scroll within the cell only when that particular audio file is playing. Right now I can make the text scroll using the marquee feature but I can't figure out how to make it only scroll when only that audio file is playing.
Note: That marquee is deprecated...
But to solve this specific problem if it's going to be executed in a supported browsers
See snippet
marq = document.getElementById("marq");;
marq.style.opacity = "0";
aud = document.getElementById("aud");;
aud.onplay = function() {
marq.style.display = "auto";
marq.start();
marq.style.opacity = "1";
}
aud.onpause = function() {
marq.stop();
}
<td>
<center>
<img src="images/artists/Becca.png" width="110" heigth="110">
<marquee id="marq" behavior="" direction="left">Becca - Trap (J Paul Mix)</marquee>
<audio controls id="aud">
<source src="http://mp3-pesni.org/music/3dc9ed0908d29016e2d41e8abb0a31fd.mp3" type="audio/mp3">
<p>Your browser doesn't support HTML5 audio. Here is alink to the audioinstead.</p>
</audio>
</center>
</td>
Nevertheless, I advise that you use css3 animation to mimic that marquee tag
See snippet below
var title = document.getElementById("title");
aud = document.getElementById("aud");;
aud.onplay = function() {
title.classList.remove('stop');
title.classList.add('running');
}
aud.onpause = function() {
title.classList.remove('running');
title.classList.add('stop');
}
#-webkit-keyframes anime {
0% {
right: 0%;
}
100% {
right: -100%;
}
}
#-moz-keyframes anime {
0% {
right: 0%;
}
100% {
right: -100%;
}
}
#-o-keyframes anime {
0% {
right: 0%;
}
100% {
right: -100%;
}
}
#keyframes anime {
0% {
right: 0%;
}
100% {
right: -100%;
}
}
#marq {
border: solid black 1px;
;
overflow: hidden;
text-align: left;
}
#title {
position: relative;
animation-name: anime;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
display: inline-block;
right: 0%;
opacity: 0;
color: green;
}
.stop {
animation-play-state: paused;
opacity: 1 !important;
}
.running {
animation-play-state: running;
opacity: 1 !important;
}
<td>
<center>
<img src="images/artists/Becca.png" width="110" heigth="110">
<div id="marq">
<div id="title">
Song 1
</div>
</div>
<audio controls id="aud">
<source src="http://mp3-pesni.org/music/3dc9ed0908d29016e2d41e8abb0a31fd.mp3" type="audio/mp3">
<p>Your browser doesn't support HTML5 audio. Here is alink to the audioinstead.</p>
</audio>
</center>
</td>
I have a background image for a div.
I need the background to be a different colour other than white until the background image is loaded.
I can not use a background color on a container div, as my background image has transparency and I want to see page content underneath.
is there a way to have a background color which loads instantly, and then when the background image is loaded use that? I know I could do it with JS but is there any fallback method I can use with just css/ html?
You can simply stack the two CSS rules.
background-color: #000;
background-image: url("...");
The background color will display until the image is loaded.
If you are absolutely against Javascript for whatever reason, you can create an effect that mimics what you would obtain with Javascript.
http://jsfiddle.net/8Qk5K/5/
div {
background : url(http://www.st.hirosaki-u.ac.jp/~shimpei/GPS/GPSCMC/images/sphere-transparent.png);
width:500px;
height:500px;
position:relative;
}
.container:before{
width:500px;
height:500px;
position:absolute;
left:0;
top:0;
content:"";
background:#333;
-webkit-animation: fade-out 99999s 1 linear; /* Safari 4+ */
-moz-animation: fade-out 99999s 1 linear; /* Fx 5+ */
-o-animation: fade-out 99999s 1 linear; /* Opera 12+ */
animation: fade-out 99999s 1 linear; /* IE 10+ */
}
#-webkit-keyframes fade-out {
0% { opacity: 1; }
0.002% { opacity: 0; }
100% { opacity: 0; }
}
#-moz-keyframes fade-out {
0% { opacity: 1; }
0.002% { opacity: 0; }
100% { opacity: 0; }
}
#-o-keyframes fade-out {
0% { opacity: 1; }
0.002% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes fade-out {
0% { opacity: 1; }
0.002% { opacity: 0; }
100% { opacity: 0; }
}
What this does is:
add a block element above your image, with your desired background.
fade that background after little time (you have to find the right amount that works for your content).
keep the background faded with infinite time.
The down side of this as you probably noticed is that you can't predict the exact time. For some, the image would load, for others it may still have a little bit till it loaded.
You can also adjust do fade-out time, depending on browser. If someone access the website with IE8 for example, you can add a higher fade-out time.
Also, a delay can be added to the animation, to only start it after some time.