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
