WordPress Custom Animation CSS

Question

My custom CSS file "animation.css" is not animating elements in my wordpress theme. When inspecting with firebug I noticed the link to animation.css is there along with all my styles, however the type is type="text/javascript" rather than "text/css". Is this correct or am I doing something wrong ? If so is my function.php wp_register and wp_enqueue scripts correct?

link to animation.css

<script src="http://www.mysite.info/wp-content/themes/responsive-childtheme-master/animation.css?ver=3.9" type="text/javascript">

Fuction.php

function My_adds_to_the_footer(){

    wp_register_script('add-animation-css', get_stylesheet_directory_uri(). '/animation.css');

    wp_enqueue_script('add-animation-css'); 

}

    add_action('wp_enqueue_scripts', 'My_adds_to_the_footer'); 

//Hooks my custom function into WP's wp_enqueue_scripts function

    ?>

Answer 1

That is because you are registering/enqueing it as a script. You can add CSS in the wp_enqueue_scripts action but they should be added with the wp_enqueue_style function (and wp_register_styleif you register and enqueue seperately)

E.g.

function My_adds_to_the_footer(){

   wp_register_style('add-animation-css', get_stylesheet_directory_uri(). '/animation.css');

    wp_enqueue_style('add-animation-css'); 

}

    add_action('wp_enqueue_scripts', 'My_adds_to_the_footer');