animation works in style.css, but will not work in other style sheet. why? - TechRepublic
Question
May 30, 2021 at 04:00 PM
spencer1621515293

animation works in style.css, but will not work in other style sheet. why?

by spencer1621515293 . Updated 5 years, 1 month ago

Hi, my animations work in style.css, but It won’t work when put in another style sheet in a folder named css, and the file in that folder named slider.css
I have enqueued it and put the css in. but cannot figure out what I have done wrong..
I have enqeued it in functions php along with others.
here it is:
<?php
function childtheme_parent_styles() {
wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

function mytheme_files() {
wp_enqueue_style('mytheme_main_style', get_stylesheet_uri());
wp_enqueue_style('mytheme_wpforms_style' , get_theme_file_uri('wpforms.css'));
wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all');

}

add_action( 'wp_enqueue_scripts', 'mytheme_files');
add_action( 'wp_enqueue_scripts', 'wpforms_style', 11);

and here is the css in the slider.css file:
/*
Theme Name: twentythirteen child
Theme URI: https://www.wpbeginner.com/
Description: A Twenty Thirteen child theme
Author: WPBeginner
Author URI: https://www.wpbeginner.com
Template: twentythirteen
Version: 1.0.0
*/

@import url(“../twentythirteen/css/slider.css”);

.ball {
animation: .5s move infinite alternate linear;
}

.ball.bouncing {
animation: .5s bounce infinite cubic-bezier(.1,.25,.1,1) alternate;
}

/* define keyframes */

@keyframes move {
0% {
transform: translateY(200%);
}
100% {
transform: translateY(0);
}
}

body {
text-align: center;
background: #fafafa;
padding: 50px;
text-align: center;
}

.ball {
width: 10%;
padding-bottom: 10%;
border-radius: 50%;
background: #2098d1;
box-shadow: 0px 5px 0px rgba(0,0,0,0.2);
margin-left: 10%;
display: inline-block;
}

If anyone can help me solve this please

This discussion is locked

All Comments