Web Development

Our forums are currently in maintenance mode and the ability to post is disabled. We will be back up and running as soon as possible. Thanks for your patience!

Question

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

By spencer1621515293 ·
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);

</php>

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
Thread display: Collapse - | Expand +

All Answers

Share your knowledge

Related Discussions

Related Forums