Difficulty with animated presentations

As a developer with limited CSS experience, I am trying to create a CSS3 slideshow using only two images. After discovering some interesting code for this purpose, which can be found here, I decided to make a small change to the original code (specifically, I removed the #cf3 id selector for img .top):

.slide {
    position:absolute;
}   

@keyframes cf3FadeInOut {
    0% {
          opacity:1;

}           
45% {
    opacity:1;

}           
55% {       
    opacity:0;

}       
100% {  
    opacity:0;

}       

}

img.top {
    animation-name: cf3FadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-direction: alternate;

}

The first image is specified as 

<img class="slideshow top" src="img1.jpg">
. The second image is similar, but does not include the "top" class.

Despite all my other CSS functioning correctly on page load, the animation I implemented seems to be missing. Can anyone spot where I may have made a mistake?

htmlcss

Answer №1

Remember to include specific vendor prefixes when using CSS3 animations as the specification is still in draft form.

-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
-webkit-animation-direction: alternate;

-moz-animation-name: cf3FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 10s;
-moz-animation-direction: alternate;

-o-animation-name: cf3FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 10s;
-o-animation-direction: alternate;

animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;

/* Ensure to define all keyframes for each prefix */
@-webkit-keyframes cf3FadeInOut { ... }
@-moz-keyframes cf3FadeInOut { ... }
@-o-keyframes cf3FadeInOut { ... }
@keyframes cf3FadeInOut { ... }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When a user taps on a link or anchor within a specific webpage on an iPhone, the font size will automatically increase

The issue is specific to iPhones. I have tested it on an iPhone 5 (landscape mode) and an iPhone 4s (landscape mode). For a visual demonstration, you can view the video here. I attempted to fix the problem by specifying the font size, but unfortunately, ...

htmlcssiphonemobile-safari

Unconventional arrangement of gaps for radio buttons

Hey there, I've been searching for solutions on various platforms but haven't found any luck so far. These are the questions I've looked into: Radio buttons and label to display in same line Documentation on <FIELDSE ...

htmlcss

Ensure that two elements containing content of varying width are equal in width

I am facing a challenge with a container that contains two child elements (previous and next links). These links have labels of different lengths, but I need them both to have the same width on the page. Ideally, each link should be as wide as the widest e ...

htmlcss

Should all images be set to 100% width with a standard Bootstrap configuration?

For my website project, I decided to incorporate the Bootstrap carousel into the header using version 3.0.3 of Bootstrap. Everything seemed to be functioning correctly until I noticed a strange issue with the image sizes on the page. Initially, all the ima ...

htmlcsstwitter-bootstrapresponsive-designcarousel

Can you explain the purpose of the role attribute in XHTML? How is it commonly utilized?

After reviewing W3C's information about the role attribute, I am still unclear about its purpose. Is the role attribute meant to simply clarify the code, or do some browsers or spiders interpret it in a specific way? Could the role attribute serve as ...

javascripthtmlattributesxhtml

An unusual outcome occurred while attempting to duplicate the text

After copying the letter A, I noticed that an empty string is being logged to the console instead of the expected A. However, when I paste, the console does successfully log the letter A. document.addEventListener('copy', handler); document ...

javascripthtmlcss

Finding the span that contains numerical values within text using regular expressions in XPath

Currently, my code is utilizing //span[text()='1'] | //span[text()='2'] | //span[text()='3'], but its appearance is not quite optimal. I am interested in learning a more elegant approach to achieve the same result. For insta ...

htmlregexxpath

A dynamically-generated dropdown element in the DOM is being duplicated due to JavaScript manipulation

Currently, I am dynamically adding a dropdown element to the page using javascript. The goal is for this dropdown to modify the properties displayed on a map. However, when attempting to add the element after the map loads, I encounter an issue where the d ...

javascripthtml

Discovering the block's height with the power of Jquery

I have written a piece of code that sets the height of a block of text and then applies that height to an image within the block. However, the size of the image ends up being smaller than the size of the block. https://i.stack.imgur.com/QUFWy.png <scr ...

jqueryhtmlcsscarousel

What is the best way to arrange an unordered list in a horizontal layout?

I have four lists that I want to display side by side. The first row should show a Doctor and Patient side by side, the second row should show a Pharma Company and Employee side by side. However, in my code, this layout is not working as intended. .tree ...

htmlcss

"Learn how to clear an input field using jQuery with this simple guide

I've gone through a few discussions, such as this one and that one, but I'm still struggling to clear the input field after submission. What is the simplest way to achieve this? This is my current approach: $(document).ready(function(){ $(& ...

javascriptjqueryhtml

Retrieving checkbox values from HTML and storing them in a temporary JavaScript/HTML variable

My form has multiple checkboxes all with the same id "cbna". When I submit the form, I want the JavaScript code to check if at least one checkbox is checked. If no checkbox is checked, an alert should appear. If a checkbox is checked, the value stored in ...

javascripthtml

What is the best way to save high-resolution images created with HTML5 canvas?

Currently, there is a JavaScript script being used to load and manipulate images using the fabricjs library. The canvas dimensions are set to 600x350 pixels. When smaller images are uploaded onto the canvas and saved as a file on disk, everything works c ...

javascripthtmlcanvashtml5-canvasfabricjs

Mastering the art of manipulating Div elements using CSS for the optimal Print View experience

I have a table with several columns and 1000 rows. When I print the page, it breaks the rows onto different pages, showing the remaining rows on subsequent pages. I want to display the complete record in one go. Below is a sample code with only one row in ...

htmlcsscss-float

Is Jquery struggling to modify the visual enhancements?

Check out this link, I need the sidebar design to be similar to what is shown in the provided link. Furthermore, I am looking for a way to have a pointer that follows along with my selection on different labels such as home, charts, etc. Can anyone assis ...

javascriptjqueryhtml

Tips on showcasing an array as a matrix with a neat line property

I am currently developing an application using TypeScript, and utilizing a JSON array structured like this: data = [{"name":"dog", "line":1}, {"name":"cet", "line":1}, ...

htmljsonangulartypescript

Make the div stretch across the entire width of the page, excluding the width of a fixed div located on the right side, without needing to set a margin-right property

I've been struggling to find a solution for my wiki development project. My challenge involves designing a page layout with a fixed-width sidebar on the right, while ensuring that content to the left of the sidebar adjusts its width accordingly. I wan ...

htmlcsswidthinline

What is the best way to create a sliding menu that appears from the right side on a mobile device using HTML, CSS, and JQuery

Is there a way to have the menu slide in smoothly from the right side after clicking on the menu bar icon, including sliding the menu bar icon itself? The current code displays the menu directly upon clicking on the menu bar, but I would like it to slide i ...

javascriptjqueryhtmlcssmenu

Filtering posts in Angular with the use of pipes

I've been attempting to use pipes in Angular to filter posts from a table, but I keep running into this error on the console: core.js:12689 Can't bind to 'ngForFilter' since it isn't a known property of 'a'. I believe th ...

htmlangularpipengfor

What is the process for converting plain text into an image tag using the methods ".replace()" and ".html()"?

My goal is to customize this particular answer so that it can transform classic BCCode [img]{url}[/img] into an HTML image. In the code snippet provided, I have successfully implemented something similar with [b]text[/b]. However, when attempting to use [i ...

javascriptjqueryhtmlregexreplace