detecting syntax errors in CSS with @media queries and keyframes

/*general CSS setting for all device types above hd*/

                * {
                    margin: 0;
                    padding: 0;
                }

                #watchonly {
                    display: none;
                }


                /*animation of the championship logo*/

                #champ {
                    position: absolute;
                    top: 15%;
                    right: 20%;
                    animation-name: champ;
                    animation-duration: 5s;
                    animation-timing-function: linear;
                    animation-delay: 2s;
                }

                @keyframes champ {
                    0% {
                        right: 20%;
                        top: 15%;
                    }
                    25% {
                        right: 22%;
                        top: 16%;
                    }
                    50% {
                        right: 20%;
                        top: 17%;
                    }
                    75% {
                        right: 19%;
                        top: 16%;
                    }
                    100% {
                        right: 20%;
                        top: 15%;
                        transform: rotateY(360deg);
                    }
                }


                /*navigation controls*/

                nav ul li {
                    display: inline;
                }

                nav ul li a, nav ul li a:visited {
                    color: #006734;
                    display: block;
                    float: left;
                    font-size: 1.25em;
                    font-weight: bold;
                    margin: 5px 2px;
                    padding: 7px 10px 4px;
                    text-shadow: 0 1px 1px white;
                    text-transform: uppercase;
                }

                nav ul li a:hover {
                    text-decoration: none;
                    background-color: #009340;
                }

                nav, main, nav ul li a, .twitter-timeline {
                    border-radius: 30px;
                }

                nav {
                    background: #6fad60;
                    padding: 0 5px;
                    position: absolute;
                    right: 0;
                    top: 4px;
                    border: 1px solid #0e1f0c;
                    box-shadow: 0 1px 1px #0e1f0c;
                }


                /*switching off the watch only text*/

                #watchonly {
                    display: none;
                }

                .clear:after {
                    content: ".";
                    display: block;
                    height: 0;
                    clear: both;
                    visibility: hidden;
                }

                body {
                    font-size: 15px;
                    color: #f8f8f8;
                    background-color: #bcbcbc;
                    font-family: Arial, Helvetica, sans-serif;
                }


                /*the default font*/

                h1, h2, h3 {
                    font-family: "Myriad Pro", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
                    color: #00923f;
                    text-shadow: 0 1px 1px black;
                }

                h1 {
                    font-size: 35px;
                    padding: 3px;
                    text-transform: uppercase;
                }

                h3 {
                    font-family: forte, "Myriad Pro", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
                    font-size: 30px;
                    font-weight: normal;
                    margin: 2px;
                }

                img {
                    width: auto;
                    height: 100%;
                }

                p {
                    line-height: 120%;
                    padding-bottom: 2px;
                }

                main .line {
                    background-color: #15242a;
                    border-bottom-color: #204656;
                    margin: 3px;
                }

                .line {
                    height: 1px;
                    background-color: #24404c;
                    border-bottom: 1px solid #416371;
                    margin: 2px;
                    overflow: hidden;
                }

                footer .line {
                    margin: 2px;
                }


                /*Main page size*/

                #page {
                    width: 900px;
                    margin: 0 auto;
                    position: relative;
                }

                main {
                    background-color: #006634;
                    margin: 2px;
                    padding: 20px;
                    text-shadow: 0 2px 0 #001f10;
                    margin-top: 20px;
                }

                footer {
                    color: #000000;
                    margin-bottom: 30px;
                    text-align: center;
                    font-size: 10px;
                }

                footer a, footer a:visited {
                    color: #6fad60;
                    background-color: #006634;
                    padding: 2px 4px;
                }

                footer a:hover {
                    text-decoration: none;
                    background-color: #000000;
                }

                footer a.up {
                    float: right;
                }


                /*control of the twitter frame*/

                .twitter-timeline {
                    border: 3px solid #00943f;
                    float: right;
                    margin-left: 15px;
                    overflow: hidden;
                }

                #twitter-widget-0 {
                    height: 500px !important;
                    min-height: 500px !important;
                }

                a, a:visited {
                    color: #ffffff;
                    text-decoration: none;
                    outline: none;
                }

                a:hover {
                    color: black;
                    text-decoration: underline;
                }

                a img {
                    border: none;
                }

                iframe {
                    width: 100%;
                    height: 600px;
                }


                /*turning off the image and allowing the iframe to show*/

                #whensmall {
                    display: none;
                }


                /*control of the form*/

                form {
                    padding: 20px;
                }

                textarea {
                    height: 300px;
                    width: 275px;
                }

                input {
                    padding-left: 90px;
                }


                /*control of map iframe*/

                .map {
                    width: 300px;
                    height: 350px;
                }

I have been struggling to validate my website using the W3C validator.

The HTML5 validation is successful but the CSS validation is not. I am getting parse errors (x6) at keyframes.

I have experimented with different curly bracket arrangements as it seems that the parser is interpreting them incorrectly.

This is my first attempt at creating an HTML and CSS website. Any help would be greatly appreciated.

// Your CSS code goes here
csshtml

Answer №1

Latest Information

Based on the specifications from https://www.w3.org/TR/CSS2/media.html#at-media-rule, at-rules (@...) are considered invalid within the @media rules (such as the @keyframes rules).

It is recommended to define the animations outside of the media queries and then apply them to the elements within the media query.

If you use an editor that can automatically format your CSS, it will help identify any issues.

@media only screen and (min-width: 301px) and (max-width: 500px) {
  /* Disable iframe, large champion image, and watch only text */
  #whenbig {
    display: none;
  }
  #whensmall {
    display: none;
  }
  #watchonly {
    display: none;
  }
  /* Animation for championship logo */
  #champ {
    position: absolute;
    @keyframes champ1 {
      25% {
        right: 2%;
        top: 2%;
      }
      50% {
        right: 4%;
        top: 1%;
      }
      75% {
        right: 2%;
        top: 2%;
      }
      100% {
        right: 0%;
        top: 0%;
      }
    }
    ul {
        padding: 0%;
        nav ul li a,
        nav ul li a:visited {
          color: #006734;
        }
        nav ul li {
            display: inline;
        }
        nav {
            position: relative;
        }
        #page {
            width: 295px;
            .map {
              width: 260px;
            }
            #twitter-widget-0 {
              height: 45px !important;
              .twitter-timeline {
                border: 3px solid #00943f;
                h1 {

Upon inspection, it appears that some } are missing in the code leading to incorrect nesting.

Answer №2

Your @keyframe should not be inside your block #champ. It needs to be structured like this: `

div {
    width: 100px;
    height: 100px;
    background: red;
    position :relative;
    -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove 5s infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
    0%   {top: 0px;}
    25%  {top: 200px;}
    75%  {top: 50px}
    100% {top: 100px;}
}

/* Standard syntax */
@keyframes mymove {
    0%   {top: 0px;}
    25%  {top: 200px;}
    75%  {top: 50px}
    100% {top: 100px;}
}
<!DOCTYPE html>
<html>
<head>
<style> 

</style>
</head>
<body>

<p><strong>Note:</strong> The @keyframes rule is not supported in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

`

As shown, mymove is a variable located at the top level as a variable

Answer №3

While validators are helpful tools, they are not the ultimate authority on valid HTML and CSS. Ultimately, as long as your code works and the browser isn't showing any errors, you should be good to go.

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

After a CSS animation, the Div element disappears from view

I recently implemented a CSS3 delayed animation on page load. Everything was working smoothly until I noticed that after the animation finishes, the DIV reverts back to visibility: hidden. .content-left { margin-left: 100px; margin-top: 32px; ...

htmlcsscss-animations

Angular showcases the presence of a signed-in user at page load, disregarding the absence of

Currently, I am following a course where I have implemented a simple login form inside the navigation bar: <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary"> <div class="container"> ...

htmlangularvisual-studio-code

How to Insert a Background Image into Advanced Custom Fields (ACF) using CSS

Hey there, I'm facing a bit of a challenge with this particular section. In the past, I've only included ACF PHP within HTML when the background image was directly in the HTML code. Now, however, I have two shapes specified in my CSS using pseudo ...

phphtmlcsswordpressadvanced-custom-fields

What are some effective strategies for incorporating multiple Themes into an AngularJS project?

Currently, I am in the process of working on a project that involves utilizing AngularJS, UI Bootstrap, and Sass. The next step is to incorporate different themes that can be selected by the user. While I have successfully implemented the ability to apply ...

javascriptcssangularjstwitter-bootstrapsass

Building and saving an HTML webpage using Node.js: A step-by-step guide

Using node.js, I developed an application that gathers data in a MongoDB database. For example: name: John pagename: mypage links: [link1, link2, link3] The task at hand is to generate static HTML pages with the format pagename.mydomainname.com, and ins ...

htmlnode.js

Choosing the initial offspring of an element that do not share a common parent

My question might not be perfectly phrased, for which I apologize. Is there a CSS method to select only the first child of an element without affecting others that are not grouped under the same parent? For instance: <div class="parent"> <div ...

csscss-selectors

Video files embedded using Shopify's HTML code may not be visible on iPhones

Hello everyone, I hope you can help me with my issue! I have successfully integrated an HTML video onto my Shopify homepage, but I am experiencing some trouble when trying to view it on an iPhone. Instead of the video playing, I see a blank box. Below is ...

htmlvideoshopify

What sets apart Material UI's gutterBottom from a paragraph?

Can you explain the distinction between these two options? While exploring the Typography Component API, I noticed that both the gutterBottom and paragraph props seem to serve the same purpose. If set to true, the margin bottom will be 0. You can find mor ...

cssreactjsmaterial-ui

Deck.gl's StaticMap component from Mapbox fails to resize properly, causing it to overwrite other elements on the screen

I am encountering an issue while trying to integrate a basic deck.gl (mapbox static map) into a react project. Although I can successfully add the map, it ends up taking over the entire page and hides any other content that should be visible above it. Spec ...

htmlreactjsmapboxdeck.gl

Using HTML and JavaScript, we can set two different color values - one for the background and one for the h1 title

I am trying to save two values, one for the h1 tag and one for the body background. I want the user to select color 1 and color 2. When I press the third button, all changes should be applied and the colors should change. I have attempted this but with no ...

javascripthtmlcss

CSS experts caution that the addition of margin and padding can cause the screen to jump

When I apply margin and padding to this class, it starts glitching like in the second GIF. However, if I remove margin and padding everything works fine, but I do need them for styling purposes. What could be causing this issue and how can I resolve it? ...

htmlcss

Stack two divs together

It may seem silly, but I just can't get it to work. I'm attempting to enclose two divs with different classes in another div, but my current code is automatically closing the divs. There are multiple sets of divs with classes .panel-heading and ...

javascriptjqueryhtml

Words appear on the screen, flowing smoothly from left to right

I am trying to create a hover effect where a caption appears when an image is hovered over. The text should slide in from left to right, causing the container to grow along the X axis as the image is hovered over. I have managed to make the text appear on ...

csscss-transitions

Steps to position images and text side by side in a grid layout

Trying to create a grid layout with profile images and text aligned next to each other, but struggling with CSS. If anyone could provide some guidance, that would be greatly appreciated! Here is the HTML code snippet: <div class="col-sm-3" ...

javascripthtmlcssvue.jsvuejs2

Why isn't the field I added to my state functioning properly?

Can anyone explain why I am getting names without the added selected field??? I can fetch names from my API JSON (1) and I'm attempting to modify it by adding the selected field (2). export default function Display() { ... const init ...

javascripthtmlreactjs

AngularJS: splitting the parent <div> into multiple sections every nth element

I have an array of strings in Javascript and I am attempting to use AngularJS to create nested <div> elements. var arr = ["abc", "def", "ghi", "jkl", "mno", "pqr", "stu"]; My goal is to group every 3 elements together like so. <div class="pare ...

javascripthtmlangularjs

Updating Dropdown Selection in Angular 9 and 10

Is there a way to set attributes to "Selected" in HTML options based on a condition from a *ngFor loop in response.body of the component ts file? Below is the dropdown code: <select [(ngModel)]="customer.id"> <option *ngFor="let location of lo ...

htmltypescripthtml-selectangular9angular10

Creating an Eye-catching Presentation: Tips for Adding Text to Your CSS3 Slideshow

I am currently in the process of creating a CSS3 slideshow with text for each image. I found inspiration from this example: . However, I made some modifications to make it responsive. Here is the HTML code I have used: <div id="slideshow"> < ...

htmlcss

Learn how to showcase the value of the selected radio button in AngularJS

To show the chosen radio button in the response div, make sure to hide the div if no option is selected. Check out the code below: <body ng-app="QuestionDisplayModule"> <form> <div ng-controller="QuestionDisplayController" ...

javascripthtmlangularjs

Basic title in material-ui navigation bar

I was hoping to display a simple label on the right side of the AppBar. Currently, I am using the iconElementRight prop and inserting a disabled flat button: <AppBar iconElementRight={<FlatButton label="My Label" disabled={true}/>} /> Thi ...

cssmaterial-ui